HTML
web基础
<!--
web基础：
1.web标准（万维网-w3c）：
结构标准：HTML---决定网页上有什么东西（能显示什么内容）
表现标准：css---决定网页上内容的布局和显示方式
行为标准：JavaScript（js）---决定网页上的动态效果
2.认识HTML
HTML是超文本标记语言（可以用来标记文本、图片、视频、flash、按钮、输入框等内容）
HTML不是编程语言，不会编译执行，语法错误也不会报错导致程序不能往后运行
3.HTML版本
广义的H5：指HTML5+CSS3+js
狭义的H5：指HTML5
4.HTML编程
a。HTML标记语言对应的文件的后缀，一般都是html
b.HTML的结果：整个html是通过不同的标记来组成
5.标签/标记
a。双标签
<标签名 属性=属性值 属性=属性值>标签内容</标签名>
b。单标签（自闭合标签）
<标签名 属性=属性值 属性=属性值 />
<标签名 属性=属性值 属性=属性值>
说明：
标签名：HTML标准中固定的（标签名和尖括号之间不能有空白）
属性：属性和标签名之间用空格隔开，以属性=属性值的形式存在，多个属性之间也用空格隔开
（属性可以是HTML标准中的属性，也可以是自定义的属性）
标签内容：是指开始标签和结束标签之间的内容。标签的内容可以是任何内容（可以是字符串，也可以是其他任何标签）
<a></a>---a标签
<b></b>---b标签
<input>---input标签
HTML语法中不区分大小写
6.网页的结构：
<!Doctype HTML>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
-->
<!Doctype HTML>
<!--Doctype：来对当前的html版本进行说明
HTML代表的默认版本（HTML5）
-->
<!--html标签代表整个网页-->
<html>
<!--head标签中的内容一般都是看不见的，并且里面的子标签是固定的
title标签
meta标签
link标签
style标签
script标签
base标签
-->
<head>
<!--设置网页标题（可见）-->
<title>HTML基础</title>
<!--charest:设置编码方式-->
<meta charset="utf-8"/>
</head>
<!--body标签中的内容，负责整个网页的显示部分-->
<body>
</body>
</html>
添加文本
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--标题标签（h1-h6）-->
<h1>我是标题1，<br />哼哼，世界和平</h1>
<h2>我是标题2</h2>
<h3> 呵呵</h3>
<!--2.段落标签（p）
a。一个p标签对应一个段落
b。p标签的内容结束后会和其他内容之间默认有一个空行
-->
<p> 我是大魔王，不服就来战<br />大爱的打打啊打啊啊啊啊打啊ad啊啊打打啊</p>
<p>可惜了</p>
<!--3.文本符号
 ；---空格
-->
<!--4.换行标签（br）-->
<!--5.超链接（a）-->
<a href="http://www.baidu.com">百度一下</a>
<!--6.文字加粗（strong/b）
<b>加粗文字</b>
<strong>加粗文字</strong>---有强调作用
-->
<p>一起去看流星雨?<strong>不存在的</strong></p>
<!--7.文字倾斜（i/em）
em标签有强调作用
-->
<p><em><strong>快乐风男</strong></em></p>
<!--8.水平线（hr）-->
<hr />
<a href="http://www.taobao.com">淘宝网</a>
</body>
</html>
列表
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--1.有序列表
ol
-->
<ol>
<li>语文</li>
<li>数学</li>
<li>英语</li>
</ol>
<!--2.无序列表（ul）-->
<ul>
<li>成都</li>
<li>重庆</li>
<li>上海</li>
</ul>
<!--3。自定义列表（dl）-->
<dl>
<dt>城市</dt>
<dd>成都</dd>
</dl>
</body>
</html>
图片和超链接
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--1.图片标签（img）
src属性：图片的地址（本地地址、网络地址）
本地地址：绝对路径和相对路径（相对于工程目录）
title属性：图片的标题（鼠标停留在图片上，隔一段时间才会显示）
alt属性：图片加载失败后显示的提示信息（只有在失败的时候显示）
-->
<img src="img/09JRZ(YZ8N}U}ID1_PE@{S0.png"/>
<hr />
<img title="女神" src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=50331453,2700563884&fm=27&gp=0.jpg"/>
<h1>图片1</h1>
<img id="image1" alt="图片加载失败" title="洪门守护者" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2825970519,1486085087&fm=27&gp=0.jpg"/>
<h1>图片2</h1>
<img alt="图片加载失败" title="洪门守护者" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2825970519,1486085087&fm=27&gp=0.jpg"/>
<h1>图片3</h1>
<img alt="图片加载失败" title="洪门守护者" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2825970519,1486085087&fm=27&gp=0.jpg"/>
<!--2.超链接（a）
网页上点击后可以跳转的标签都是超链接
href属性：跳转的地址（可以是网页地址也可以是本地地址）
空串和#：刷新一下回到网页顶部
本地地址：当前工程的其他html文件路径
选择器：让网页滚动到网页上的任意的位置
target属性：
_self:在当前页面打开href地址
_blank：在新的页面中打开href的地址
a。点击文字跳转
-->
<a href="http://www.baidu.com" target="_blank">百度一下</a>
<a href="列表.html" target="_blank">列表</a>
<a href="#image1">图片1</a>
<a href="http://www.taobao.com">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=50331453,2700563884&fm=27&gp=0.jpg"/>
</a>
</body>
</html>
表格
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<!--
table标签代表整个表格
tr--代表一行
td--代表一列（一个td对应一个单元格）
一个表格中可以有多行，一行有一列
属性：
border：设置整个表格中边框的宽度
width：设置整个表格的宽度
height：设置整个表格的高度（每一行高度是一样的）
width和height也可以用在设置每一列每一行的宽度高度
align：center--让整个表格在网页中居中（也可运用到指定的某一行某一列，让其中的数据在表格中居中）
bgcolor：背景颜色设置
cellspacing：设置有无边框
cellpadding：设置表格中的数据到边框的距离
bordercolor：边框颜色
注意：所有的值都要用双引号括起来
-->
<table border="1" width="300" height="100"align="center" bgcolor="azure" cellspacing="0">
<!--2*3表格-->
<tr align="center">
<!--第一行第一列-->
<td>姓名</td>
<!--第一行第二列-->
<td>年龄</td>
<!--第一行第三列-->
<td>性别</td>
</tr>
<tr align="center">
<td>张飞</td>
<td>28</td>
<td>男</td>
</tr>
</table>
<hr />
<table border="1" cellpadding="30" cellspacing="0" bgcolor="bisque" bordercolor="azure">
<!--用width和height来设置每一列每一行的高度和宽度-->
<tr height="50">
<td width="200">1</td>
<td width="300">2</td>
<td width="300">3</td>
</tr>
<tr height="120">
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
</body>
</html>
复杂表格
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格2.0</title>
</head>
<body>
<!--
复杂表格中的合并单元格
rowspan：合并行
colspan：合并列
-->
<table border="1" cellspacing="0" cellpadding="30">
<tr>
<td rowspan="2">1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
</tr>
</table>
<hr />
<table border="1" cellspacing="0" cellpadding="30">
<tr>
<td rowspan="3"></td>
<td></td>
<td></td>
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
</body>
</html>
网友评论