第二阶段day1 HTML
2018-10-29 本文已影响0人
大漠判官1
1/html标签
标签 == 标记
1.标签语法
双标签（常规标签）：<标签名 属性名1：属性值1 属性名2：属性值2>标签内容</标签名>
但标签：<标签名 属性名1：属性值1 属性名2：属性值.../>或者<标签名 属性名1：属性值1 属性名2：属性值2 ...>
说明：
标签名--是html中已有的标签，不能自己随便命名。 注意：标签名和<以及标签名和/之间不能有空格>
属性---属性和属性对应的值之间用：链接，多个属性之间用空格隔开，属性没有位置要求
标签内容--在开始标签和结束标签之间，标签的内容可以是任意的（文本，也可以是其他标签）
2、head标签的内容
head中的标签有：title,mate,base,link,style,script
title：--设置网页标签
mate---设置网页元数据（单标签）
3、body
body中的标签主要用来在网页的内容中添加显示信息
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!--设置网页标签-->
<title>百度</title>
</head>
<body>
</body>
</html>
2、文本标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>文本标签</title>
</head>
<body>
1.标题标签：h1-h6
h1 - 大标题
h2 - 副标题
h3 - 副标题下的副标题
....
<h1>我是标题1</h1>
<h2>我是标题2</h2>
<h3>我是标题3</h3>
<h4>我是标题4</h4>
<h5>我是标题5</h5>
<h6>我是标题5</h6>
<h1>市民“救助”警犬涉嫌盗窃被立案
当事人可提申诉</h1>
<!--
2.段落标签：p
一个段落使用一个p标签。每个p标签中的内容显示完成后会自动换行
-->
<p> 近日，浙江金华市民救助警犬被取保候审一事引发关注。</p>
<p>三个多月前，应女士和丈夫傍晚出门散步，救助了一只在路边翻食垃圾的“流浪狗”，几天后，却被民警告知带回家的是派出所的警犬，夫妻二人涉嫌盗窃被立案，随后被取保候审。</p>
<p>10月27日晚，金华市公安局金东分局发布通报称，2018年6月29日晚，金东公安分局多湖派出所民警发现散放在派出所门口附近的一条警犬被盗。7月3日，金东公安分局对涉嫌盗窃的朱某、应某采取取保候审强制措施。并称，犯罪嫌疑人朱某、应某知道该犬系名贵犬种德国牧羊犬。</p>
<!--
3.特殊功能标签和符号
html中文本中的换行、空格、tab等都是无效的（空白无效）
换行：<br>
空格：  
-->
<p>
床前明月光,<br>
疑是地上霜.<br>
举头望明月,<br>
低头思故乡。
</p>
<!--
4.字体相关标签
加粗：b标签/strong标签
b标签只是单纯的文字效果加粗，strong标签有强调的意思
倾斜：i标签/em标签
i标签只是单纯的文字效果倾斜，em标签有强调的意思
水平线：<hr>
-->
<hr>
<p>
<b>床前</b><i>明月</i>光,<br>
<strong>疑是</strong><em>地上</em>霜.<br>
举头望明月,<br>
<strong><em>低头思故乡</em></strong>。
</p>
</body>
</html>
3、列表标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>列表标签</title>
</head>
<body>
<!-- 列表标签分为有序列表、无序列表、自定义列表 -->
<!--
1.有序列表:
ol标签 -- 代表整个列表
li标签 -- 代表列表中的元素
-->
<ol>
<li>基础语法</li>
<li>web前端</li>
<li>web后端</li>
<li>数据和人工智能</li>
<li>项目</li>
</ol>
<!--
2.无序列表
ul标签 - 代表整个列表
li标签 - 代表列表中的元素
-->
<ul>
<li>Python人工智能</li>
<li>HTML5</li>
<li>Java大数据</li>
<li>自动化测试</li>
</ul>
<!--
3.自定义列表
dl标签 - 代表整个列表
dt标签 - 分组名
dd标签 - 分组中的内容
-->
<dl>
<dt>Python教学部</dt>
<dd>余婷</dd>
<dd>骆昊</dd>
<dd>王海飞</dd>
<dd>肖世荣</dd>
<dt>H5教学部</dt>
<dd>吴老师</dd>
<dd>丁老师</dd>
<dd>周老师</dd>
</dl>
</body>
</html>
4、图片和超链接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<!--
1. 图片标签: img
单标签
a.src属性 - 图片地址(可以本地图片路径也可以是网络图片的url)
本地图片：地址可以是绝对路径也可以是相对路径。一般将图片放在img文件夹中，然后写相对路径
b.title - 设置图片标题（鼠标停留在图片上，显示的内容）
c.alt - 设置图片加载失败的提示信息
-->
<!-- 显示一张本地图片 -->
<img id="top" src="img/luffy4.jpg" title="路飞" alt="加载失败">
<p>第二张</p>
<img id="2" title="王也" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1540796986561&di=8e0f6899b0c99d9c9bea3c3b19a5216b&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20180309%2F63e7157798c34e8794e81572d38aaa06.jpeg" >
<p>第三张</p>
<img title="王也" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1540796986561&di=8e0f6899b0c99d9c9bea3c3b19a5216b&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20180309%2F63e7157798c34e8794e81572d38aaa06.jpeg" >
<p id="4">第4张</p>
<img title="王也" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1540796986561&di=8e0f6899b0c99d9c9bea3c3b19a5216b&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20180309%2F63e7157798c34e8794e81572d38aaa06.jpeg" >
<p>第5张</p>
<img title="王也" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1540796986561&di=8e0f6899b0c99d9c9bea3c3b19a5216b&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20180309%2F63e7157798c34e8794e81572d38aaa06.jpeg" >
<p>第6张</p>
<img title="王也" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1540796986561&di=8e0f6899b0c99d9c9bea3c3b19a5216b&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20180309%2F63e7157798c34e8794e81572d38aaa06.jpeg" >
<p>第7张</p>
<img title="王也" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1540796986561&di=8e0f6899b0c99d9c9bea3c3b19a5216b&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20180309%2F63e7157798c34e8794e81572d38aaa06.jpeg" >
<p>第8张</p>
<img title="王也" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1540796986561&di=8e0f6899b0c99d9c9bea3c3b19a5216b&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20180309%2F63e7157798c34e8794e81572d38aaa06.jpeg" >
<!--
2.超链接标签: a标签
a. 内容 - 文字/图片
-->
<!-- 文字超链接 -->
<a href="https://www.hao123.com">
hao123
</a>
<!-- 图片超链接 -->
<a href="https://www.baidu.com">
<img src="img/luffy2.png" >
</a>
<!--
b.href - 跳转到的目标地址
1）网络地址 - 跳转到指定的网页
2）本地的html文件地址 - 跳转到本地的html对应的网页中
3）空 - 刷新网页
4）选择器 - 在当前网页中，跳转到指定的位置
-->
<a href="03-列表标签.html">列表标签</a>
<a href="">刷新</a>
<a href="#top">回到顶部</a>
<a href="#2">第二张</a>
<a href="#4">第四张</a>
<!--
c.target - 跳转方式
_self - 默认值，在当前页面加载新的网页(原网页被覆盖)
_blank - 在新的页面中加载新的网页(原网页还在)
-->
<a href="https://www.baidu.com" target="_blank">百度一下</a>
</body>
</html>
5、数据表格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>表格</title>
</head>
<body>
<!--
1.表格标签
table标签 - 整个表格
tr - 行
td - 单元格
2.边框相关的属性
border - 边框的宽度
bordercolor - 设置边框颜色(颜色值可以是英语单词 - red，也可以RGB对应的16进制值 - #ff0000)
cellspacing - 单元格和单元格之间的间隙
cellpadding - 设置内容和单元格边框之间的间距
3.背景颜色
bgcolor - 背景颜色
a.作为table属性 - 设置整个表格的背景颜色
b.作为tr属性 - 设置一行的背景颜色
c.作为td属性 - 设置某一个单元格的背景颜色
-->
<table border="1" bordercolor="#ff0000" cellspacing="0" cellpadding="20" bgcolor="aquamarine">
<!-- 第一行 -->
<tr bgcolor="bisque">
<td>First Name</td>
<td>Last Name</td>
<td>Points</td>
</tr>
<!-- 第二行 -->
<tr>
<td>Jill</td>
<td bgcolor="green">Smith</td>
<td>50</td>
</tr>
<!-- 第三行 -->
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
<br>
<!--
4.宽度和高度
width - 设置宽度
height- 设置高度
a.作用与table - 设置整个表格的宽度和高度（会按比例分配每一行和每一列的宽度和高度）
b.分别设置每一行的高度和每一列的宽度
-->
<!-- 应用：细线表格
第一步：设置整个表格的背景颜色(边框颜色)和每个单元格的背景颜色(表格内容的颜色)不一样
第二步：设置cellspacing的值为边框的宽度
-->
<table bgcolor="black" cellspacing="1" width="300" height="200">
<tr bgcolor="wheat">
<td>姓名姓名</td>
<td>年龄</td>
<td>性别</td>
</tr>
<tr bgcolor="wheat">
<td></td>
<td></td>
<td></td>
</tr>
<tr bgcolor="wheat">
<td></td>
<td></td>
<td></td>
</tr>
</table>
<br>
<!--
5.对齐方式
align - center(居中)/left(左对齐)/right(右对齐)
a.作用于table， 让整个表格在其父标签中居中/左对齐/右对齐
b.作用于tr， 让整行中每个单元格中的内容在其单元格中居中/左对齐/右对齐
c.作用于td, 让指定的单元格中的内容居中/左对齐/右对齐
-->
<!-- 单独设置每一行和每一列的宽度和高度 -->
<table bgcolor="black" cellspacing="1" align="center">
<tr align="right" height="40" bgcolor="wheat">
<td width="120">姓名姓名</td>
<td width="100">年龄</td>
<td width="70">性别</td>
</tr>
<tr height="80" bgcolor="wheat">
<td align="center">小明</td>
<td>18</td>
<td>男</td>
</tr>
<tr height="80" bgcolor="wheat">
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
6、复杂表格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>复杂表格</title>
</head>
<body>
<!--
1.制作复杂表格的方法：
a.确定表格的最大行数, 在table中用tr表示出来
b.确定每一行有多少个单元格,用td表示出来
c.确定每一个单元格是否有合并现象。如果是行合并就设置rowspan的值，如果是列合并设置colspan的值
-->
<table border="1" cellspacing="0" width="600" height="400">
<tr>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td></td>
<td rowspan="2"></td>
<td rowspan="2"></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<br>
<table border="1", cellspacing="0", width="600" height="400">
<tr>
<td colspan="2"></td>
<td colspan="4"></td>
</tr>
<tr>
<td colspan="2"></td>
<td rowspan="2" colspan="2"></td>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="2"></td>
<td ></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan="2"></td>
</tr>
</table>
</body>
</html>
