web标准:是w3c组织制定的网页代码规范
结构标准 - html - 觉得网页上有哪些内容
表现标准 - css - 决定网页上内容的布局和样式(css有时也叫样式表)
行为标准 - JavaScript - 决定网页动态的变化(包括内容的改变和样式的改变)
1.什么是html(结构标准)
- html是超文本标记语言
超文本 - 除了文字以外,还可以对图片,视频,音频,超链接,按钮.输入框等进行标记
标记语言 - 不是编程语言,和macdown语法一样,只是通过不同的标记让内容以不一样的形式显示出来
如果语法出错不会影响其他正确的标记效果
2.什么是html文件
文件后缀.html的文件:可以直接通过浏览器打开.一般情况下,html代码写在html文件中
3.html版本
狭义h5 - html第五个大版本(支持移动网页开发)
广义的h5 - html5 + css3 + js
4.html网页结构 - 树
整个网页是一个html标签,html中直接包含head标签和body标签.
5.标签
- html就是通过不同的标签对网页内容进行标记
a.结构
双标签:<标签名 属性名1=属性值1 属性名2=属性值2 ...>标签内容</标签名>
单标签:<标签名 属性名1=属性值1 属性名2=属性值2 ...>或<标签名 属性名1=属性值1 属性名2=属性值2 .../>
b.说明
标签名 - 只能写html通过的标签,不能随便命名;标签名前不能加空格
属性 - 属性放在单标签或者双标签的开始标签中,以'属性名=值'的形式出现,多个属性之间用空格隔开;
标签内容 - 可以写任何内容,也可写其他标签
6.head标签
- head标签中包含以下内容
meta标签 - 元标签(单标签) charset='utf-8' - 设置编码方式
title标签 - 设置网页标题
link标签 - 导入外部文件(设置图标,导入css文件)
style标签 - 导入css代码
script标签 - 导入js文件和导入js代码
base标签 - 设置网页中的基本url
<!--
DOCTYPE-队html版本进行说明
html - 当前使用的是html5
注意:html中不区分大小写
-->
<!DOCTYPE html>
<html>
<head>
<!--meta - 设置网页中文本显示的编码方式-->
<meta charset="UTF-8">
<!--设置网页标题-->
<title></title>
</head>
<body>
</body>
</html>
7.文本标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文本标签</title>
</head>
<body>
<!--1.标题标签（h1-h6）
网页中标题的部分使用标题标签
-->
<h1 align="center">我是标题1</h1>
<h2>骚猪儿</h2>
<h3>骚猪儿</h3>
<h4>骚猪儿</h4>
<h5>骚猪儿</h5>
<h6>骚猪儿</h6>
<!--2.段落标签(p)
双标签
网页中一段文字就使用p标签
注意：html中在文本内容里输入回车换行无效（在网页中显示时）
-->
<p><strong>我 不是<br />标 题</strong></p>
<p><strong>我不是 标题</strong></p>
<p><strong>我不是标题</strong></p>
<p><strong>我不是标题</strong></p>
<!--3.文本符号
- 空格 -空一格像素
&emsp； - 一个空格
<br /> - 换行符号
-->
<p><strong>我 不是<br />标 题</strong></p>
<!--4.文字效果标签
a.文字加粗
b标签 - 单纯的对文字进行加粗
strong标签 - 除了对文字进行加粗，还有强调的意思
b.文字倾斜
i标签 - 单纯对文字进行倾斜
em标签 - 除了对文字进行加粗，还有强调的意思
c.水平线（hr）
单标签
hr标签 - 在hr所在位置设置一个水平线
-->
<p><strong>我不是标题</strong></p>
<p><strong><i>我不是标题</i>我不是标题</strong></p>
<hr />
<!--5.文字标签（font）
单纯的显示一段文字，多个font标签之间不会自动换行（多个p标签之间会自动换行）
-->
<font><strong>我不是标题</strong></font>
<font><strong><i>我不是标题</i>我不是标题</strong></font>
</body>
</html>
8.列表标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--列表标签
如果网页中的多个内容，他们属于具有相同意义的内容，就可以用一个列表标签将他们放在一起
-->
<!--1.无序列表（ul-li）
ul标签 - 代表整个列表
li标签 - 表示列表中的元素
-->
<ul type="circle">
<li>数学</li>
<li>语文</li>
<li>英语</li>
<a href="https://baidu.com/" target="_search">百度一下</a>
</ul>
<!--2.有序标签(ol-li)
ol标签 - 代表整个列表
li标签 - 表示列表中的元素
-->
<ol type="a">
<li>数学</li>
<li>语文</li>
<li>英语</li>
<a href="https://baidu.com/" target="_blank">百度一下</a>
</ol>
<!--3.定义标签(dl - dt - dd)
dl - 代表整个列表
dt - 列表的分组
dd - 每个分组下面的元素
-->
<dl>
<dt>四川省</dt>
<dd>成都市</dd>
<dd>成都市</dd>
<dd>成都市</dd>
<li><dt>四川省</dt></li>
<li><dd>成都市</dd></li>
<dt>四川省</dt>
<dd>成都市</dd>
<dd>成都市</dd>
<dd>成都市</dd>
</dl>
</body>
</html>
9.图片标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a href="#mao">跳转</a>
<!--图片标签（img） 单标签
网页上几乎所有的图片都是使用img标签直接或间接显示
1.src属性 - 设置图片地址
a.本地图片 - 值为本地图片的路径（可以是相对路径和绝对路径）
b.网络图片 - 值为网络图片的url
-->
<img src="img/130224121314.jpg" alt="图片加载失败..." width="300px" height="200px" title="好看的吧"/><br />
<img src="https://www.baidu.com/img/bd_logo1.png" alt="百度" title="百度一下"/><br />
<img src="https://www.baidu.com/img/bd_logo1.png" alt="百度" title="百度一下"/><br />
<img src="https://www.baidu.com/img/bd_logo1.png" alt="百度" title="百度一下"/><br />
<img src="https://www.baidu.com/img/bd_logo1.png" alt="百度" title="百度一下"/><br />
<!--超链接标签（a）
点击可以跳转其他页面的内容
1.内容
超链接在网页中可见可也以点击的部分，文字或图片
2.href属性 - 超链接点击后跳转目标地址
a.设置另外一个网页的地址 - 跳转指定网页
b.设置成本地的html文件路劲 - 跳转到本地网页中
c.设置成当前页面对应的选择器 - 让当前网页滚动到指定的位置
d.设置为空 - 刷新网页
-->
<a href="https://www.baidu.com/" target="_blank">百度一下</a><br />
<a href="https://www.baidu.com/" target="_blank"><img src="https://www.baidu.com/img/bd_logo1.png" width="300px" height="100px" alt="百度" title="百度一下"/></a><br />
<a href="03-列表标签.html" target="_blank">认识html</a><br />
<a name="mao"></a><br />
<a href="#">刷新</a><br />
<!--target
_self(默认值) - 在当前页面中显示新的网页
_blank - 在新的页面中显示新的网页
-->
<a target="_self"></a>
<input type="button" name="嘿嘿" id="搜索" value="搜索" /><br />
<input type="checkbox" name="" id="" value="" /><br />
<input type="text" name="" id="" value="" /><input type="button" name="" id="" value="搜索" /><br />
<input type="search" /><input type="button" name="嘿嘿" id="搜索" value="搜索" /><br />
</body>
</html>
10.表格标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--表格标签（table -tr -td）
table - 代表整个表格
tr - 代表表格中的行
td - 代表表格中的单元格
1.border - 设置边框宽度（单位是像素）
设置整个表格的边框宽度为border，同时设置每个单元格边框宽度为1
2.bordercolor - 设置边框颜色
html中的颜色值 - a.颜色的英语单词
b.rgb对应的16进制值，前加#
3.cellspacing - 设置表格中单元格和单元格之间，及单元格和边框之间距离
4.cellpadding - 设置表格中的内容到单元格之间的间距
5.bgcolor - 设置背景颜色
作为table属性 - 设置整个表格背景颜色
作为tr属性 - 设置一行的背景颜色
作为td属性 - 设置一个单元格背景颜色
6.width - 设置宽度
作为table属性 - 设置整个表格的宽度
作为td属性 - 设置这个单元格所在列的宽度
7.height - 设置高度
作为table属性 - 设置整个表格的高度
作为tr属性 - 设置一行的高度
8.align - 设置水平对齐方式
left（默认）- 左对齐
right - 右对齐
center - 居中
作为table属性 - 设置整个表格在网页中对齐方式
作为tr属性 - 设置一行中所有的单元格的内容在单元格中对齐方式
作为td属性 - 设置这个单元格的内容在单元格中对齐方式
9.colspan - 列合并
rowspan - 行合并
-->
<table style="border: 1px solid #199FFF;" width="555" height="800" background="img/130224121314.jpg" border="1" bordercolor="#ff0e66" cellpadding="3" cellspacing="0" align="left"><!--align="对齐方式" border="5"表框宽度--><!--cellpadding="0"内容和表格之间的间距 cellspacing="边框间距"-->
<th align="left">表头</th>
<th>表头</th>
<th>表头</th>
<tr>
<td colspan="2">一行一列</td>
<td rowspan="2">一行二列</td>
<td bgcolor="black"><p style="color: white;">一行三列</p>"</td>
</tr>
<tr align="center">
<td width="100">二行一列</td>
<td>二行二列</td>
<td>二行三列</td>
</tr>
<tr>
<td align="center">三行一列</td>
<td>三行二列</td>
<td>三行三列</td>
</tr>
</table>
<table width="55" height="80">
<tr>
<td width="200">
<div class="biaoTou">
</div>
</td>
</tr>
</table>
</body>
</html>
网友评论