1.html
1.1.web标准
1.结构标准（html):决定网页中的内容
2.表现标准（css):决定网页中内容的布局和页面
3.行为标准（javaScript):决定网页中的行为和动作（变化）
1.2html
html:超文本标记语言；python，c,java是编程语言；markdown也是超文本标记语言；
标记语言：通过不同的标记来显示不同的内容（已指定的格式）
超文本：除了文本还可以标记图片，超链接，音he'a'd频视频，flash，输入框，按钮等……
html文件就是后缀是.html的文件可以直接用浏览器打开，看到网页效果
html结构：基本结构是一个HTML标签中包含2个平行的head和body标签
head中只有title和icon可见，其他内容不可见。body代码可见网页的内宽部分，里面的标签一般都是可见的
<!DOCTYPE html> 用来说明HTML版本的，html代表html5
注意：html大小写不敏感
<meta charset="utf-8" />:设置字符编码方式
title：设置网页标题
1.3 标签 == 标记
1.标签语法
双标签（常规标签）：
<标签名 属性名1：属性值1 属性名2：属性值2……></标签名>
单标签：
<标签名 属性名1：属性值1 属性名2：属性值2……/> 或者
<标签名 属性名1：属性值1 属性名2：属性值2……>
说明：
标签名是HTML中已经有的标签。标签名和<，/之间不能有空隙
属性和属性值之间用：连接，多个属性用空格隔开
标签内容：在开始标签和结束标签之间，标签的内容是任意的（可以是文本也可以是其他标签）
2.head标签中的内容
head中的标签有：title，meta,base,link,style,script
title:设置网页标题
meta:设置网页元数据（单标签）charset = 'utf-8'…………
3.body
标题标签：h1-h6
段落标签:p;一个段落用一个p标签,内容显示完后自动换行
html中文本的换行,空格,tab是无效的
4.特殊功能标签:
换行:
单标签
空格: & nbsp;& emsp;
加粗:b标签/strong加粗
b标签只是单纯的文字效果加粗,strong标签有强调的意思
倾斜:i标签/em标签,区别同加粗
水平线:hr单标签
5.列表标签:
列表标签可分为有序列表,无序列表,自定义列表
1.有序列表:
ol标签:代表整个列表
li标签:代表列表中的元素
2.无序列表
ul标签:整个列表
li标签:代表列表中的元素
3.自定义列表
dl标签:整个列表
dt标签:分组名
dd标签:分组中的内容
6.图片和超链接标签:
图片标签:img单标签<img src="绝对路径/相对路径/网络图片地址" title=" 鼠标停留在图片上时显示的图形" alt="加载失败"/>
超链接标签:a标签;内容可以为文字,图片
<a href="www.baidu.com">百度</a>
href:跳转地址,
1.可以跳转到指定网页
2.跳转到本地文件地址,href="路飞.jpg"
3.如果herf="",为空,表示刷新
4.选择器 ,<a href="#top">回到顶部</a> 前面要写id="top"
target跳转方式:
_self:覆盖原网页
_blank:加载一个新的窗口
<a href="http://www.baidu.com" target="_blank">百度一下</a>
7.数据表格
1.表格标签
table 标签:整个表格
tr标签:行
td标签:单元格
2.边款属性
border:边框的宽度(给整个表格和各个单元格设置边框)
bordercolor:设置边框颜色(颜色值可以是英语单词,也可以是rgb对应的16进制值红色#ff0000)
cellspacing:单元格和单元格之间的间隙
cellpadding:单元格和内容之间的间距
3.背景颜色
bgcolor:作为table时为整个表格的背景颜色,作为tr时为这一行的背景颜色,作用于td时为单元格的背景颜色.
细线表格:设置table背景颜色,在设置各行背景颜色,再将cellspacing="1"
标签中值最小为1
4.高度和宽度
width:宽度,height:高度(按内容的比例去分配每一行的宽度和高度)
5.对其方式(align):center,left,right
作用于table使整个表格在其父标签居中,靠左靠右
作用于tr让整行单元格中内容相对单元格对其
作用于td让单元格中内容相对单元格对其
6.复杂表格
确定表格的最大行数,在table中用tr表示出来
确定每行有多少单元格,用td表示
确定每一个单元格是否有合并现象。如果是行合并就设置rowspan的值，如果是列合并设置colspan的值
<!DOCTYPE html>
<html>
<head>
<title>title标签</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1 id="top">标题1</h1>
<p>段落1</p>
<p>段落2</p>
<h2>标题2</h2>
<hr >
<p>段落2.1</p>
空 格
空  格
<strong>加粗</strong>
<b>b加粗</b>
<i>倾斜</i>
<em>em倾斜</em>
<strong><em>倾斜加粗</em></strong>
<p>
<ol>
<li>元素1</li>
<li>元素2</li>
<li>元素3</li>
</ol>
<ul>
<li>yi</li>
<li>er</li>
<li>san</li>
</ul>
<dl>
<dt>学校1</dt>
<dd>python</dd>
<dd>java</dd>
<dt>学校2</dt>
<dd>c</dd>
<dd>c#</dd>
<dd>c++</dd>
</dl>
</p>
<p>
<img src="E:\chrom下载\路飞.jpg" title="路飞"alt="路飞加载失败"/>
<img src="路飞.jpg" />
<img src="路飞.jpg" />
</p>
<p>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1540810512841&di=d4d15cd0d58a3144143ff86823fa3d43&imgtype=0&src=http%3A%2F%2Fh.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2Fc75c10385343fbf2f5ac8998b27eca8064388f8c.jpg" >
<br />
<a href="http://www.baidu.com" target="_blank">百度一下</a>
<a href="路飞.jpg">本地文件</a>
<a href="#top">回到顶部</a>
</p>
<p>
<table border="1" bgcolor="aqua" bordercolor='#ff0000' cellspacing="0" cellpadding="20">
<tr bgcolor="blue">
<td>1而繁荣时代</td>
<td>2</td>
<td bgcolor="crimson">3士大夫但是</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<!-- -->
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
<table align="center" bgcolor="black" cellspacing="1" cellpadding="20">
<tr align="center" bgcolor="aqua" height="40">
<td width="40">1</td>
<td width="60">2</td>
<td align="right" width="80">3</td>
</tr>
<tr bgcolor="aqua" height="60">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</p>
<p>
<table bgcolor="red" width="400" height="600" cellpadding="20" cellspacing="1">
<tr bgcolor="blue">
<td></td>
<td colspan="2"></td>
</tr>
<tr bgcolor="blue">
<td></td>
<td rowspan="2"></td>
<td rowspan="2"></td>
</tr>
<tr bgcolor="blue"><td></td></tr>
<tr bgcolor="blue">
<td></td>
<td></td>
<td></td>
</tr>
</table><br />
<table bgcolor="wheat" border="1" cellspacing="0" width="400" height="400">
<tr>
<td colspan="2">1</td>
<td colspan="4">1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td colspan="2" rowspan="3">1</td>
<td rowspan="2">1</td>
<td rowspan="2">1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td colspan="2">1</td>
<td colspan="2">1</td>
</tr>
<tr >
<td rowspan="2">1</td>
<td rowspan="2">1</td>
<td rowspan="2">1</td>
<td rowspan="2">1</td>
<td rowspan="2" colspan="2">1</td>
</tr>
<tr></tr>
</table>
</p>
<br />
<table bgcolor="black" cellspacing="1" cellpadding="20" width="400" height="400">
<tr bgcolor="antiquewhite">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr bgcolor="antiquewhite">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr bgcolor="antiquewhite">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr bgcolor="antiquewhite">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
网友评论