MOXD 发表于 2018-10-11 19:44

HTML新手入门帖<3>

文字标签属性——<1-3>
文字属性标记<font>..</font>1.文字颜色 指定颜色 <font color=#> ... </font>#=RRGGBB 16 进制数码
例:010.htm






文字属性标记
2.文字字体
<font face=“#, #, ..., #”> ... </font> #=客户端可获得的字体
011.htm






文字属性标记
3.文字大小
<font size=#> ... </font>
#=1, 2, 3, 4, 5, 6, 7 or +#, -#
例:012.htm







https://static.52pojie.cn/static/image/hrline/1.gif




文字布局

行的控制
段(Paragraph) (可以看作是空行) <p>
空白占位符&nbsp;
例:013.htm




行的控制
HTML的段落与段落之间有一定的空隔。如果不希望出现空隔而只想换行的话,就要用到另一个元素,即<br>元素。<br>元素可以使所在的位置出现换行。这种换行和浏览器的自动换行的效果类似。<br>元素不是成对出现的。
例:014.htm
不换行<nobr>
          015.htm





https://static.52pojie.cn/static/image/hrline/1.gif






HTML文字与段落格式控制

<body>……
   <i>倾斜文本</i>
   <b>粗体文本</b>
   <u>下划线文本</u>
          <s>删除线文本</s>
   ……</body>
例:016.htm




https://static.52pojie.cn/static/image/hrline/1.gif


基本组成部分—HTML注释


HTML文档可以插入注释。注释内容不会在浏览器窗口显示
HTML注释的格式为:
<!-- 注释内容 -- > <!--多行注释内容 -- >




https://static.52pojie.cn/static/image/hrline/1.gif




文字的对齐

<hn align=#>...</hn> (n=1,2,3,4,5,6)
<p align=#>...</p> (#=left, center, right)




https://static.52pojie.cn/static/image/hrline/1.gif




3.HTML段落与分行控制




居中--- <center>元素
<center>元素是一个独立的使所标记的字符居中的元素。它的作用与使用<p>元素里的align=“center”类似
例如:<center>居中段落</center>


标尺线
        <hr size = #>:设定线宽
       <hr width=#>:设定线长
       <hr align=#>:设定对齐方式 #=left, right
       <hr color=#> :设定线的颜色





https://static.52pojie.cn/static/image/hrline/1.gif





3.HTML段落与分行控制


无序列表元素—1
列表在HTML的文档里有重要的地位,HTML规定了多种列表元素。列表所起的主要作用是使特定的文本有序化。







无序列表元素—2
无序列表是由<ul>和<li>元素定义的:
<ul>
<li>sports</li>
<li> food </li>
<li> drink </li>
<li> friends </li>
</ul>




https://static.52pojie.cn/static/image/hrline/1.gif



4.超级链接—普通超级链接1


超级链接是整个WWW应用的核心和基础。如果没有超级链接的概念,那么,我们现在所有的WWW的应用将不复存在。所以,对超级链接的掌握具有特殊重要的意义。



4.超级链接—普通超级链接2


超级链接是用锚元素<a>定义的
在<a>元素下,有元素属性href, href的属性值为一个URL地址
如:<a href=“http://www.ecust.edu.cn”>指向学校的超级链接</a>
如:<a href=“29.htm">普通超级链接</a>
例:021.html


超级链接—E-mail超级链接




超级链接可以指向E-mail地址
如:<a href=“mailto:ldd@mail.ecust.edu.cn">指向E-mail地址的超级链接</a>
例:022.htm
4.超级链接—新开链接窗口


开一个新的(浏览器)窗口 (Target Window)
<a href="URL" target=“_blank"> ... </a>
例:023.htm



https://static.52pojie.cn/static/image/hrline/1.gif


HTML对图片的控制--1



基本语法:
<img src=“图片名称”>
引用图片必须用<img>元素标志。<img>元素下的基本元素属性是src属性,src的属性值为所引用的图片的URL地址。
src属性是必须的。Src的URL可以是绝对地址,也可以是相对地址




HTML对图片的控制--2
所谓图片的替代文本,指图片不能显示时在图片所在位置显示的一段文本或当鼠标移到图片上时也会显示替代文本。
定义图片替代文本的方法是:
<img src=“图片名称” alt=“这是一张图片”>
例:024.htm




HTML对图片的控制--3

图片的显示大小
我们可以指定一幅图片在浏览器窗口里的显示大小。
定义图片的显示大小的方法是:
<img src="sample.jpg" width=100 height=100 >
width指定图片的宽度,height指定高度。它们的属性值可以是象素,也可以是%。

HTML对图片的控制--4
图片的边框
我们可以为一幅图片加一个边框以突出显示:
<img src="sample.jpg" border= " 2 " >
border的属性值为象素数

HTML对图片的控制--5
图片的对齐方式
图片可以相对于页面或单元格有一个对齐方式。
定义水平对齐方式的方法是:
<img src=“sample.jpg” align=“left” >
<img src=“sample.jpg” align=“right”>





https://static.52pojie.cn/static/image/hrline/1.gif
附件我就不发了,以便你们更好的自学


备注:此文章仅提供给喜好HTML新手,这些是基础,如内容有错误回复我。<老版教程是旧了点 我入门学的这个 基础扎实最重要>











MOXD 发表于 2018-10-30 15:59

名字全被注册啦 发表于 2018-10-11 20:13
标签在h5已经被弃用了哦~

感谢您的支持,虽然方法有点老,万变不离其宗, 对新手纯手打代码 用着比较合适哦

MOXD 发表于 2018-10-30 16:00

名字全被注册啦 发表于 2018-10-11 20:13
标签在h5已经被弃用了哦~

感谢您的支持,虽然方法有点老,万变不离其宗 但是对新手手打代码 很有用哦~

XT0624 发表于 2018-10-11 19:57

这篇文章...很小白

XT0624 发表于 2018-10-11 19:58

不过,加油吧。

fan1191237272 发表于 2018-10-11 20:03

我也在学 ,一起加油吧

名字全被注册啦 发表于 2018-10-11 20:13

<font>标签在h5已经被弃用了哦~

yifeng 发表于 2018-10-11 20:26

前端的知识就是杂了点,不用刻意去记,用多了自然就会了

幕言 发表于 2018-10-12 16:19

小白一枚,正在学,感觉还是要学很多的..........

a594 发表于 2018-10-12 21:44

正在学 谢谢了

Kaiter_Plus 发表于 2018-10-13 12:12

感谢楼主分享!

liujin13 发表于 2018-10-13 23:25

谢谢楼主,不过我看不懂(纯小白)
页: [1] 2
查看完整版本: HTML新手入门帖<3>