入门标签的语法及文本属性
1:文本标题标签:h1-h6
特点:有默认的样式,文字会加粗,而且字号不一样。
h1标签比较特殊,唯一性,单个网页中只能够出现一次,一般用于网站的logo。
h2-h6标签:板块的标题、一段叙述性文本的标题。
需要注意的问题:h1-h6 不能互相嵌套。
2:字体样式等:
加粗:<b></b> <strong></strong>
倾斜:<i></i> <em></em>
下划线:<u></u>
水平线:<hr>
换行符:<br>
3:段落标记:
<p></p>
不能进行相互嵌套
不能嵌套h1-h6
span标签:
表示一个字符 或者 一小段文本
4:转义字符:
  不换行空格
<> 左右尖角号
© 备案图标
div 作为一个块或者容器标签,主要是划分网页的结构
5:无序列表和有序列表
无序列表:
<ul>
<li>某某新闻标题</li>
<li>某某新闻标题</li>
<li>某某新闻标题</li>
<li>某某新闻标题</li>
<li>某某新闻标题</li>
</ul>
特点:默认情况下:每一个li前面都存在一个列表符号(实心圆点)
怎么用:实现新闻列表、页面的主导航
有序列表:
<ol>
<li>某某新闻标题</li>
<li>某某新闻标题</li>
<li>某某新闻标题</li>
<li>某某新闻标题</li>
<li>某某新闻标题</li>
</ol>
特点:列表符号默认为数字
拓展: 换字母和罗马数字
type="a" 小写字母
type="A" 大写字母
type="i" 罗马小写
type="I" 罗马大写
start="" 属性值:只能接收数字(1、2、3...)
自定义列表:
<dl>
<dt></dt>
<dd></dd>
</dl>
6:超链接
<a></a>
a标签的属性:
href="url" 作用:跳转地址。
<a href="#">新闻</a> //空连接,在当前页面进行跳转。
<a href="###">新闻</a> //空连接,不会跳转 (用来模拟一个按钮)
<a href="javascript:void(0)"></a>
target=""
属性值:
_self 默认值:在当前窗口打开
_blank 新建一个窗口打开目标的地址
title=""
属性(不仅仅使用在a上面,大部分标签都支持)
做提示信息
超链接默认的样式:文字为蓝色、下划线
实现新闻列表的结构:
<ul>
<li>
<a href="#">新闻内容信息等</a>
</li>
<li>
<a href="#">新闻内容信息等</a>
</li>
<li>
<a href="#">新闻内容信息等</a>
</li>
<li>
<a href="#">新闻内容信息等</a>
</li>
</ul>
7:相对路径
./ 当前的路径(操作文件所在的路径)
../ 返回上一级
8:表格
表格标签:
table 表格
tr 行
td 列
表格属性:
width="" 宽 (table上面添加 整个表格的宽,如果添加在td上 每列的一个宽)
height="" 高
border="" 添加边框
bordercolor="" 更改边框的颜色
cellpadding="" 内容距离边框的一个间距
cellspeacing="" 边框与边框之间的间距
align="" 水平对齐方式:left right center
valign="" 垂直对齐方式:top bottom middle
9:单元格的合并
行合并: rowspan="合并的单元格的数量"
列合并: colspan="合并的单元格的数量"
跨行合并行!跨列合并列!
注:无论合并行 还是 合并列 都是给td添加属性。和谁合并就删除谁。
文本属性:
文本大小的设置:
1:font-size:
常规像素为16px 像素的大小一般为偶数(不低于12px)
em的大小决定于font-size
例如:font-size=20px 1em=20px 默认1em=16px
em的其他应用:
line-height(行高)
line-height:2em (根据font-size的值确定)
使用法定字号:
xx-small == 9px
x-small == 11px
small == 13px
medium == 16px
large == 19px
x-large == 23px
xx-large == 27px
2:设置文本的颜色
color:
#六位或者三位16进制数字。
0带表最暗的颜色 f代表最亮的颜色。
RGB模式:rgb(245,245,245)
3:设置文本的字体
font-family:多个属性值的时候是用逗号隔开
英文默认的字体:Arial
font-family属性值是中文需要放在引号里面,英文字体多个单词,也需要放在引号里面。一个英文字体的单词,不需要放在引号里面。
如果存在中英文字体:先写英文再写中文字体。
4:设置文本字体的加粗 font-weight
属性值;
bold 加粗
bolder 更粗
nomal 恢复常规文本
100
200
300
...
900
100 - 500 常规状态
600 - 900 加粗状态
5:控制文本的倾斜 font-style
属性值:
normal 恢复常规文本
italic 文本倾斜
oblique 文本倾斜
6:line-height 行高
再设计图上量取行高:(地一行的开始第二行的顶端)
当单行文本的line-height值 和 容器高保持一致,可使文本在容器里面上下居中!!!
7:文本对齐方式 text-align
left
right
center
justify ( 两端对齐 )
8:文本修饰属性
属性值:
none 去掉下划线
underline 下划线
overline 上划线
line-through 删除线(例如淘宝的标签价格)
9:首行缩进 text-indent:
text-indent:2em;
text-indent能接收负值(悬挂缩进)
10:字符间距 letter-spacing
11:单词间距 word-spacing
12:text-transform
属性值:
capitalize 首字母大写
uppercase 全部大写
lowercase 全部小写