五.文本标记
7.文本样式
|
<b></b> <strong></strong> 加粗 <i></i> <em></em> 斜体 <s></s> <del></del> 删除线 H5推荐使用有语义的标签 <u></u> 下划线 <sup></sup> 上标 <sub></sub> 下标 |
8.分区元素
①块级分区<div></div>
|
用于页面布局的 特点:独立成行 |
②行分区<span></span>
|
同一行文字使用不同样式的时候，使用span 特点：与其他span共用一行 10:07~10:22休息 |
9.元素的显示方式
①块级元素
|
在网页中独占一行的元素就是块级元素 默认是从上往下排列 ex:div h1~h6 p pre |
②行内元素
|
在网页中能够在一行内显示的元素(后期加深学习) 同一行中，从左往右排列 ex:span b i em....... |
③行内块
④table
⑤flex 弹性
六.图像和链接
1.图像语法
|
<img> 或者 <img/> <img src="图片路径/url"> |
2.url
|
Uniform Resource Locator 统一资源定位符 俗称：路径 |
3.路径的表现形式
①绝对路径
|
完整的路径 1.使用任何网络资源的时候，使用绝对路径 http://cdn.tmooc.cn/bsfile/imgad/2049A.png 通信协议://主机名/文件目录结构/文件名称 优点：不占用本地存储空间 缺点：不稳定 2.使用本机资源使用绝对路径，项目中不许使用 <img src="c: 8.png">
|
②相对路径
|
参照物，访问资源的HTML文件 1.兄弟关系，直接写文件名称 2.子集目录 先进入兄弟文件夹，再引入图片 ex src="img/09.png" 3.父级目录，使用../返回到父级目录 ex src="../../img/07.png" |
4.img标签的属性
|
src：source源 设置图片资源路径 alt：图片资源出现错误时，显示的文本 设置图片的宽度 height:设置图片的高度 如果设置的宽高比，不符合图片本身的宽高比，图片会发生失真 解决方法，宽高只设置一个，另外一个自动适应 |
5.链接
①语法
|
<a href=""></a> 属性 1.href 2.target 指定打开链接的方式 取值 1._self 默认，在当前标签页打开新的网页 2._blank 在新的标签页中打开 |
②a标签的其它表现形式
|
1.下载资源 <a href="*.zip"></a> 2.链接到电子邮件 <a href="mailto:chengliang@163.com">打开邮箱</a> 3.返回页面顶部 <a href="#">返回页面顶部</a> 4.使用a标签，执行js <a href="javascript:show()">点点我</a> |
6.锚点
①锚点是什么
|
锚点，就是在页面上做的一个记号 可以通过点击a标签，跳转到这个记号 |
②使用锚点
|
1.定义锚点 a.h4的方案<a name="锚点名称"></a> b.<any id="锚点名称"> 2.使用a标签跳转到锚点 <a href="#锚点名称"></a> |
七.表格
1.表格语法
①标记
|
<table></table> 表格 <tr></tr> 行---table row <td></td> 列---table data table中，所有的数据写在td中
<table> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table> 简写方式 table>tr*4>td*3>a{123} |
②属性
|
table元素的属性 border="2px" 设置表格边框 width="150px" 设置表格宽度 height="200px" 设置表格高度 align="center" 设置表格本身的水平对齐方式 取值 left/center/right bgcolor="pink" 设置背景颜色 bordercolor="red"设置边框颜色 cellpadding="50px" 设置单元格的内边距(内容到边框的距离) cellspacing="20px" 设置单元格的外边距(边框到边框的距离) |
①colspan 跨列2.不规则的表格
|
colspan 从指定单元格开始，横向向右合并N个单元格，n包含自己 被合并的单元格要删除掉 |
②rowspan 跨行
|
rowspan 从指定单元格开始，纵向向下合并N个单元格，n包含自己 被合并的单元格要删除 |
3.表格中的可选标记
①表格标题
|
<caption></caption> 要紧跟<table>标签 |
②行/列的标题
|
<th></th> 代替td，内容字体加粗，水平居中 |
4.表格的复杂应用
①行分组