标签:某某 font 入门 标签 新闻标题 文本 文本属性 属性
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 全部小写
标签:某某,font,入门,标签,新闻标题,文本,文本属性,属性
来源: https://www.cnblogs.com/Animy/p/12346109.html
本站声明:
1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。