html
行内元素
作用:用于页面填充或装饰
特性:
1、多个内元素共享一行空间
2、默认宽高有内容决定
3、不可指定宽高
4、行内元素不可以嵌套块元素
(注意与块元素做对比)
元素:
span 无意义的行内元素
a
href
url http://ip:port/path
相对地址 ./11.html
. 当前文件夹
…上一级文件夹
绝对地址 /user/…或 d://briup/…
mailto 邮件
锚点 (使用id)
target
img src(同href)
alt(图片找不到时的文本替代)
功能性标签
strong 强调加粗
b 加粗
em 强调
i 斜体
del 删除线
sub/sup 上标/下标
<body>
<a href="http://www.baidu.com" target="_blank">百度一下</a>
<!-- href打开外网地址(在原网页跳转),target用于打开新页面 -->
<a href="./11.html">个人简历</a>
<!-- 内网,相对地址,绝对地址(. 当前目录 .. 为上一级目录) -->
<a href="mailto:zxiaoxuan327@gmail.com">发邮件给我们</a>
<!-- 跳转至邮件 -->
<div id="dd">
<a href="#grjl">个人经历</a>
</div>
<!-- 锚点:通过id跳转 -->
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<h2 id="grjl">个人经历</h2>
<div>
<a href="#dd">回到顶端</a>
</div>
<p>写过代码。。。。获过大奖</p>
<!-- 锚点:通过id跳转 -->
<img src="./1.jpg" alt="图没了">
<!-- 相对路径,alt:图片找不到时的文本替代 -->
<!-- 行内元素 -->
<!--装饰类型行元素-->
<strong>强调加粗</strong>
<b>加粗</b>
<em>强调</em>
<i>斜体</i>
<del>删除线</del>
<sub>2</sub>
<!-- 下标 -->
<sup>3</sup>
<!-- 上标 -->
</body>
以上具体:file:///D:/briup/2.htmlcss/Day4%E3%80%815%E3%80%816/1/33.html
元素使用策略
列表性质:ul、ol、li
标题性质:h1~h3
段落性质:p
不知道用什么时就用div
总体:先使用块元素搭建框架,再使用行元素填充页面
功能性标签
table
作用:展示数据列表
元素
caption 标题
thead 表头 有tr__td/th(td 列;th 居中加粗)
tbady 表体 有tr__td/th
tfoot 表底 有tr__td/th
属性
1、border标签:设定围绕表格的边框的宽度
style=“border-collapse: collapse;” 可使表格线合为一条【下划线部分可改为:separate(默认值 边框会分开)、inherit(将从父类继承)】
cellspacing标签:设定单元格之间的间距(也向table标签添加border-spacing样式进行设置)
cellpadding标签:设定单元内边距
<table border=1 style="border-collapse: collapse;" align="center">
2、width标签:设定表格的宽度
height标签:设定表格的高度
bgcolor标签:设定表格背景色(可用颜色名,如:pink;也可使用十六进制值表示如下)
<td width=80 bgcolor="#ffcc99" height=40>姓名:</td>
3、align标签:指定表格相对于周围标签的对齐方式(有left、right、center)
<td rowspan=5 width=120 align="center">
4、valign标签:设置表格行中单元格内容的垂直对齐方式(有top上、middle中、bottom下、baseline基准线)
5、colspan样式:设置单元格合并多少列
rowspan样式:设置单元格合并多少行
<td rowspan=5 width=120 align="center">
<td colspan=4>xxx省xx市</td>
6、nowrap标签:设定单元格内文本的内容是否换行(不加则自动换行)
以下为部分属性应用及显示
<body>
<table border=1 style="border-collapse: collapse;" align="center">
<!-- border 给表格加线-->
<!-- style="border-collapse: collapse;" 使线变为一根,而不是两根粘一起 -->
<!-- align="center" 居中(加在tr上一行都可居中)-->
<h2 align="center">个人简介</h2>
<tbody>
<!-- 一定记得写tbody -->
<tr>
<td width=80 bgcolor="#ffcc99" height=40>姓名:</td>
<!-- bgcolor 设置颜色 -->
<!-- width 宽 hight 高 -->
<td width=70>xxx</td>
<td width=80 bgcolor="#ffcc99">籍贯:</td>
<td width=70>xxx</td>
<td rowspan=5 width=120 align="center">
<!-- rowspan 合并行 (td的属性)-->
<img src="1.jpg" height="200">
</td>
</tr>
<tr>
<td bgcolor="#ffcc99" height=40>出生日期:</td>
<td>0000.00.00</td>
<td bgcolor="#ffcc99" >政治面貌:</td>
<td>xx</td>
</tr>
<tr>
<td bgcolor="#ffcc99" height=40>性别:</td>
<td>x</td>
<td bgcolor="#ffcc99">民族:</td>
<td>x</td>
</tr>
<tr>
<td bgcolor="#ffcc99" height=40>学位:</td>
<td>学士学位</td>
<td bgcolor="#ffcc99">移动电话:</td>
<td>12345678912</td>
</tr>
<tr>
<td bgcolor="#ffcc99" height=40>专业:</td>
<td>嵌入式</td>
<td bgcolor="#ffcc99">电子邮件:</td>
<td>123@163.com</td>
</tr>
<tr>
<td bgcolor="#ffcc99" height=40>地址:</td>
<td colspan=4>xxx省xx市</td>
<!-- colspan 合并列 (td的属性)-->
</tr>
<tr>
<td bgcolor="#ffcc99" height=40>兴趣爱好:</td>
<td colspan=4>篮球、足球、羽毛球、游泳、旅游</td>
</tr>
<tr>
<td height=80 bgcolor="#ffcc99">教育背景:</td>
<td colspan=4>2015~2017就读于xxx学校</td>
</tr>
<tr>
<td height=70 bgcolor="#ffcc99">获奖情况:</td>
<td colspan=4>无</td>
</tr><tr>
<td height=70 bgcolor="#ffcc99">自我评价:</td>
<td colspan=4>
.....
<br>。。。。。
</td>
</tr>
</tbody>
</body>