Day1：
01-HTML的骨架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>这是关于html的骨架</title>
</head>
<body>
</body>
</html>02-标题标签
<h1></h1>.........<h6></h6>共有六组标题标签。由1至6逐级递减。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>我是标题1</h1>
<h2>我是h2</h2>
<h3>我是h3</h3>
<h4>我是h4</h4>
<h5>我是h5</h5>
<h6>我是h6</h6>
<h7>我是h7</h7>
</body>
</html>
（注：标题标签无h7）
03-分段
分段标签<p></p>
水平线标签<hr/>或<hr>
换行标签<br/>或<br> (自身结束自身，在html5中“/”可省略)
Day2：
01-文本格式化标签
<strong></strong> <b></b>均为加粗
倾斜标签<i></i> <em></em>
下划线<u></u>
删除线 <del></del>
预格式化<pre></pre>
上标 <sup></sup> 下标<sub></sub>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--<strong></strong> <b></b>均为加粗-->
<!--倾斜标签<i></i> <em></em>-->
<!--下划线<u></u>-->
<!--删除线 <del></del>-->
<i>为了在首场明显降雪前及时、妥善布置好地下通道防滑地毯，以最贴心最暖心的状态迎接广大市民游客，</i>中央大街管委会在11月初就搞起了<u>“试验田”</u>，<strong>升级铺设方案</strong><b>：精心裁切过的硬丝地毯与台阶完美贴合，以金属边条封边既美观又耐用。今冬的中央大街不仅铺设了防滑地毯，还为地下通道扶手包裹上了温暖的“红色绒衣”，<del>方便市民游客通行时扶握。</del></b>
<!--预格式化<pre></pre>-->
<pre>
静夜思
床前明月光，疑是地上霜。
举头望明月，低头思故乡。
</pre>
<!--上标 <sup></sup> 下标<sub></sub>-->
x<sup>2</sup>
y<sub>2</sub>
</body>
</html>02-插入图片
常见图片格式 GIF(256色) JPG(1600多色) PNG BMP
资源路径问题：
绝对路径：从计算机的顶级目录（盘符）开始的文件路径
相对路径：指的是从当前文件所在位置作为参考建立的路径
<img/> src属性：指向图片的路径
绝对位置<img src="E:\前端代码\Day 2\image\b320205f6ab51f648db10c4d2d2deaec.jpeg">
相对路径<img src="../image/b320205f6ab51f648db10c4d2d2deaec.jpeg">
网络地址 <img src="http://gips1.baidu.com/it/u=1410005327,4082018016&fm=3028&app=3028&f=JPEG&fmt=auto?w=960&h=1280">
03-img常见的属性
width height 单位px(像素)
border 边框 单位px
align top/middle/bottom/left/right
valign top/middle/bottom/left/right
vs/hspace 图片与文字的垂直/水平距离
alt 如果图片无法正常加载出来，alt里面的文字就会代替图片显示
title 用来显示描述的文字
如果没有alt属性值，那么alt默认的属性值就是title的属性值
04-超链接
超链接可以完成页面之间的跳转
<a href="#"></a>
href :属性是指定连接调换的地址的 #表示这是一个空连接，点击之后不会跳转，会把当前页面刷新一遍
超链接默认是在当前窗口跳转到指定页面的，如果想要更改利用属性
05-锚链接
全局属性 id 是标签的唯一标识，同一个网页内，id属性值不能重复
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 全局属性 id 是标签的唯一标识，同一个网页内，id属性值不能重复
id a
-->
<h3>
<a href="#one">早年经历</a>
</h3>
<h3>
演艺生涯
</h3>
<h3>
社会活动
</h3>
<h3>锚链接</h3>
<h3 id="one">锚链接锚链接</h3>
</body>
</html>06-视频标签
<video></video>
src属性属性指明视屏位置
属性名="属性质"
contrils="controls"控件
autoplay自动播放
loop循环播放 要么配合muted 要么用js实现
muted静音
width height 长 宽
07-列表标签
无序列表：布局排列整齐的不需要规定顺序的区域
ul>li
li：列表的子项
ul标签只能包裹li标签 li标签可以包含任何内容
有序列表 : ol>li
自定义列表：dl>dt>dd
<dl>标签中只能包含dt和dd
dd、dt标签里面可以包含任意标签
08-表格标签
<tr></tr>
<th></th>表头
<td></td>
border：n 边框属性 0%~100% npx
align 属性表示表格的对齐方式的
left 、center、right
bgcolor bgcolor="repudiandae"
background="../image/test.jpeg"
cellspacing:单元格与单元格之间的间隙，默认的值是2px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
border:n 边框属性
align 属性表示表格的对齐方式
left、center、right
background
cellspace:单元格与单元格之间的距离默认是2px
-->
<table border="1" width="500px" height="300px" align="center" cellspace="0" bgcolor="#cccccc" >
<tr align="center" valign="middle">
<th>姓名</th>
<th>学号</th>
</tr>
<tr>
<td align="center">张三</td>
<td align="center">21</td>
</tr>
</table>
</body>
</html>09-表格的跨行与跨列
1、明确合并的目标
2、保留最左上的元素，添加相应的跨行跨列的属性
3、删除调其他被跨行的单元格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
1、明确合并的目标
2、保留最左上的元素，添加相应的跨行跨列的属性
3、删除调其他被跨行的单元格
-->
<table border="1" width="500px" height="400px">
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<!-- 跨行 -->
<td rowspan="2"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td ></td>
<!-- 跨列 -->
<td colspan="3"></td>
</tr>
</table>
</body>
</html>10-作业
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1" align="middle" width="850px" height="250px">
<tr>
<td colspan="5" align="middle" width="1000px" height="50px"><strong>个人简历</strong></td>
</tr>
<tr>
<th width="150px" height="50px">姓 名：</th>
<th width="200px" height="50px"></th>
<th width="150px" height="50px">性 别：</th>
<th width="200px" height="50px"></th>
<th rowspan="4" width="200px" height="50px">照片</th>
</tr>
<tr>
<th width="150px" height="50px">婚姻状况：</th>
<th width="200px" height="50px"></th>
<th width="150px" height="50px">出生年月：</th>
<th width="200px" height="50px"></th>
</tr>
<tr>
<th width="150px" height="50px">民 族：</th>
<th width="200px" height="50px"></th>
<th width="150px" height="50px">政治面貌：</th>
<th width="200px" height="50px"></th>
</tr>
<tr>
<th width="150px" height="50px">身 高：</th>
<th width="200px" height="50px"></th>
<th width="150px" height="50px">学 历：</th>
<th width="200px" height="50px"></th>
</tr>
</table>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
