1.web基础
1)web标准：(万维网-w3c)
结构标准：HTML -决定网页内容
表现标准:css ---决定网页布局和显示方式
行为标准:JavaScript(js)---决定网页动态的效果
2)认识HTML
HTML是超文本标记语言，(可以用来标记文本、图片、视频、音频、flash、按钮、输入框等内容)
HTML不是编程语言，不会编译执行，语法错误不会报错也不会导致程序不能继续执行
3）HTML版本
广义的HS:指HTML5+css3+js
狭义的H5：HTML5
4）HTML编程
HTML标记语言对应的文件的后缀，一般都是html
HTML的结构：整个html是通过不同的标记来组成的
5)标签/标记
双标签：<标签名 属性=属性值 属性=属性值>标签内容</标签名>
单标签：
<标签名 属性=属性值 属性=属性值/>
<标签名 属性=属性值 属性=属性值>
说明：
标签名：HTML标准中固定的(注意：<和标签名之间不能有空白))
属性：属性和标签名之间用空格隔开,以属性=属性值的形式存在,多个属性之间也用空格隔开(属性可以是
HTML标准中的属性,也可以是自定义的属性)
标签内容:是指开始标签和结束标签之间的内容,标签内容可以是任何内容(字符串,及其他任何标签)
<a></a> ---a标签
<p></p> ---p标签
<input/>---input标签
补充：HTmL语法中，不区分大小写(HTML\html\HtMl是一样的)
6.网页的结构
<!DOCTYPE HTML>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
-->
<!--DOCTYPE:对HTML版本进行说明
html：表示默认版本（html5）
-->
<!DOCTYPE HTML>
<!--html标签代表整个网页-->
<html>
<!--
head标签中的内容一般看不见，并且里面的子标签是固定的
title标签
meta标签<br />
link标签
stytle标签
script标签
base标签
-->
<head>
<!--设置网页标题(可见的)-->
<title>HTML基础</title>
<!--设置编码方式-->
<meta charset="utf-8"/>
</script>
</head>
<!--body标签中的内容，负责整个网页的显示部分-->
<body>
</body>
</html>
2.文本标签
1)标题标签
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标签4</h4>
<h5>标签5</h5>
<h6>标签6</h6>
2)段落标签(p)
一个p标签对应一个段落
p标签的内容结束后和其他的内容之间默认有一个空行
3)文本符号
---空格
其他的看手册
4)超链接(a)
<a href="http://www.baidu.com">百度一下</a>
5)文字加粗(b/strong)
<b>加粗文字</b>
<strong>加粗文字且有强的作用</strong>
6)--文字倾斜(em/i)
<i>文字倾斜</i>
<em>文字倾斜且有强调作用</em>
7)水平线(hr)
自带换行功能
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文本标签</title>
</head>
<body>
<!--标题标签(h1-h6)-->
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标签4</h4>
<h5>标签5</h5>
<h6>标签6</h6>
<!--
段落标签(p)
一个p标签对应一个段落
p标签的内容结束后和其他的内容之间默认有一个空行
-->
<p>在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代
性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好
的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。</p>
<p>在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代
性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好
的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。</p>
<!--文本符号
---空格
其他的看手册
-->
空白 空白
<!--换行标签(br)-->
<p>在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此<br/>时，浏览器将显示这个替代
性的文本而不是图像。为页面上的图像都加上替换文本属性是个好<br/>习惯，这样有助于更好
的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。</p>
<!--超链接(a)-->
<a href="http://www.baidu.com">百度一下</a>
<!--文字加粗(b/strong)
<b>加粗文字</b>
<strong>加粗文字且有强的作用</strong>
-->
<p>在浏览器无法<b>载入图像时</b>，替换文本属性告诉读者<hr />她们失去的信息。此时，<br/>浏览器将显示这个替代
性的文本而不是<strong>图像</strong>。为页面上的图像都<br/>加上替换文本属性是个好习惯，这样有助于更好
的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。</p>
<hr />
<!--文字倾斜(em/i)
<i>文字倾斜</i>
<em>文字倾斜且有强调作用</em>
-->
<p>在浏览器无法<b>载入图像时</b>，替换文本属<i><b>性告诉读</b></i>者她们失去的信息。此时，<br/>浏览器将显示这个替代
性的文本而不是<strong>图像</strong>。为页面上的图像都<br/>加上替换文本属性是个好习惯，这样有助于更好
的显示信息，并且对于那<em>些使用纯文</em>本浏览器的人来说是非常有用的。</p>
<!--水平线(hr)
自带换行功能
-->
<hr />
</body>
</html>
3.列表
1）有序列表
<ol>
<li>语文</li>
<li>数学</li>
<li>英语</li>
</ol>
2)无序列表
<ul>
<li>成都</li>
<li>重庆</li>
<li>北京</li>
</ul>
3)自定义列表
<dl>
<dt>城市</dt>
<dd>成都</dd>
<dd>重庆</dd>
<dd>合肥</dd>
<dt>省份</dt>
<dd>四川</dd>
<dd>安徽</dd>
</dl>
4.图片和超链接
1)图片标签
src属性：图片的地址(本地地址、网络地址)
本地地址：相对路径(相对于工程目录)
注意：本地图片需要放到工程目录下的img文件夹下
title属性：图片的标题(鼠标停留在图片上，隔一段时间才显现出来)
alt属性：图片加载失败后显示的提示信息
2）超链接
网页上点击后可以跳转的标签都是超链接
href属性：跳转地址(本地地址，网络地址)
网路地址：跳到对应的网址
本地地址：当前工程的其他HTML的文件路径
空串/#：刷新页面回到网页的顶部
选择器：让网页滚动到任何位置
target属性:
_self(默认的):在当前页面中打开href的地址
_blank：在新的页面中打开href的地址
点击文字跳转
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--图片标签
src属性：图片的地址(本地地址、网络地址)
本地地址：相对路径(相对于工程目录)
注意：本地图片需要放到工程目录下的img文件夹下
title属性：图片的标题(鼠标停留在图片上，隔一段时间才显现出来)
alt属性：图片加载失败后显示的提示信息
-->
<img id="image1" src="img/q2.jpg"/><br />
<img id="image2" alt="图片加载失败" title="路飞" src="https://p1.ssl.qhmsg.com/dr/270_500_/t014ce5bb61dfb70054.jpg"/>
<br />
<img id="image3" src="img/q2.jpg"/><br />
<img alt="图片加载失败" title="路飞" src="https://p1.ssl.qhmsg.com/dr/270_500_/t014ce5bb61dfb70054.jpg"/>
<!--超链接
网页上点击后可以跳转的标签都是超链接
href属性：跳转地址(本地地址，网络地址)
网路地址：跳到对应的网址
本地地址：当前工程的其他HTML的文件路径
空串/#：刷新页面回到网页的顶部
选择器：让网页滚动到任何位置
target属性:
_self(默认的):在当前页面中打开href的地址
_blank：在新的页面中打开href的地址
点击文字跳转
-->
<br />
<a href="#">百度一下</a></br>
<a href="03-列表.html" target="_blank">列表</a><br />
<a href="#image2">image2</a><br />
<!--点击图片跳转-->
<a href="https://www.360kan.com/ct/PUPmb87mMYWwET.html"><img src="img/q3.jpg"/></a>
</body>
</html>
5.表格
1）table：表格
- tr:行
- td:列
一个表格可以有多行，一行可以有多列 - border：设置表格边框的宽度
- width:设置表的宽度
- height：设置表的高度
- align:center 让表格在网页中居中
- bgcolor:给表格设置背景颜色
- cellspacing:控制单元格与单元格之间的空隙
- cellpadding:控制单元格与内容之间的间距(了解)
2)tr属性：
- height：设置单独的某一行的高度
- align:center让一行的内容居中
- bgcolor:给某一行设置背景颜色
3)td属性：
- width：设置某一列的宽度
- align:center让某一个单元格中的内容居中
- bgcolor:给某一个单元格设置背景颜色
注意：所有的属性的值都要用双引号括起来
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<!--
* table：表格
tr:行
td:列
一个表格可以有多行，一行可以有多列
border：设置表格边框的宽度
width:设置表的宽度
height：设置表的高度
align:center 让表格在网页中居中
bgcolor:给表格设置背景颜色
cellspacing:控制单元格与单元格之间的空隙
cellpadding:控制单元格与内容之间的间距(了解)
* tr属性：
height：设置单独的某一行的高度
align:center让一行的内容居中
bgcolor:给某一行设置背景颜色
* td属性：
width：设置某一列的宽度
align:center让某一个单元格中的内容居中
bgcolor:给某一个单元格设置背景颜色
注意：所有的属性的值都要用双引号括起来
-->
<table border="1" align="center" bgcolor="aquamarine" cellspacing="0" cellpadding="70 50 10 10" bordercolor="red">
<tr height="60" align="center" bgcolor="bisque">
<td width="80">姓名</td>
<td width="100">成绩</td>
<td width="120">是否留级</td>
</tr>
<tr height="70">
<td>小李</td>
<td>30</td>
<td>no</td>
</tr>
<tr height="70">
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
6.复杂的表格
1）合并行
rowspan:行的合并
2）合并列
colspan:列的合并
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>复杂的表格</title>
</head>
<body>
<!--
rowspan:行的合并
-->
<table border="1" width="300" height="200" cellspacing="0" bgcolor="aquamarine" bordercolor="red">
<tr>
<td rowspan="3"></td>
<td></td>
<td></td>
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td rowspan="3"></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="2" rowspan="2"></td>
</tr>
</table>
</body>
</html>
网友评论