html的基础学习。
如何新建一个html文件？
1.1第一步先新建一个txt文本文件。
1.2第二步 八下面的代码写进去。这是固定格式
<html>
<head>
<title>
</title>
</head>
<body>
</body>
</html>
1.3第三步把.txt修改成.html后缀的文件，这就算一个html文件了。
html 是根布局
head 头标签 用于存放：title meta base style script link
title 标题标签
body 主题标签 用于存放p h a b u i s em dei ins strong img
按照介绍的三步我们现在重新建一个文本并添加上title标题和内容body
<html>
<head>
<title>
这是标题
</title>
</head>
<body>
这是内容
</body>
</html>
在浏览器中打开如下图
2.1标签骨架
<html>
<head>
<title>
</title>
</head>
<body>
</body>
</html>
2.2标签分类
双标签
<标签名>内容</标签名>
比如 <body>内容</body>
单标签
<标签名/>
比如 <br/>
3.3标签关系
嵌套关系
<html>
<head>
</head>
</html>
标签html和标签head属于嵌套关系
并列关系
<html>
<head>
</head>
<body>
</body>
</html>
标签head和标签body属于并列关系。
编译器 ：Sublime
快速生成html框架的快捷键 1：html:5 点击键盘tab键盘 2：！ 点击键盘tab键
<meta charset="UTF-8"> 字符集编码方式
utf-8是目前最常用的字符集编码方式，常用的编码方式还有GBK 和 GB2321
DB2321简体中文 包括6763个汉字
BLG5 繁体中文 港澳台等用
DBK 包换全部的中文字符 是GB2312的扩张，加入对繁体的支持，兼容GB2312
UTF-8 是包含全世界所有国家需要用到的字符
默认使用UTF-8字符集，避免因为字符集不统一而引起乱码情况。
各种标签
标题标签
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
段落标签
<p></p>
水平线标签
<hr/>
回车标签
<br/>
<div><div> <span><span> 没有语义
标签 推荐使用 效果
<b></b> <strong></strong> <strong></strong> 粗体
<i></i> <em></em> <em></em> 斜体
<s></s> <del></del> <del></del> 加删除线
<u></u> <ins></ins> <ins></ins> 加下划线
<标签名 属性1=“属性值1” 属性2=“属性值2”>内容</标签名>
标签属性
1.标签可以拥有多个属性，必须写在开始标签中，位于标签名后面
2.属性之间不分先后顺序，标签名与属性，属性与属性之间均以空格分开
3.任何标签的属性有默认值，省略该属性取默认值
<img/>标签属性 图片
<img src="11.jpg" title="扫码" width="200" border="20"><br/>
<img src="111.png" alt="错误"><br/>
src 图片路径
alt 图像不能显示的时候替换文本
title 鼠标悬停时显示的内容
width 设置图片的宽度
height 设置图片的高度
border 设置图像边框的宽度
<a></a> 连接标签
<a href="http://www.baidu.com" target="_blank">百度</a> href里面的http不能省，target有两种模式self默认模式，点击后在自己的窗口更新，blank在线的窗口打开链接。
锚点定位标签
<a href="# id名字">
<a href="#mu1" >目录一</a>
<p id="mu1">这是目录一的内容这是目录一的内容这是目录一的内容这是目录一的内容这是目录一的内容这是目录一的内容这是目录一的内容这是目录一的内容这是目录一的内容这是目录一的内容这是目录一的内容这是目录一的内容这是目录一的内容这是目录一的内容这是目录一的内容这是目录一的内容这是目录一的内容这是目录一的内容这是目录一的内容这是目录一的内容这是目录一的内容这是目录一的内容这是目录一的内容这是目录一的内容这是目录一的内容这是目录一的内容这是目录一的内容这是目录一的内容这是目录一的内容这是目录一的内容这是目录一的内容这是目录一的内容这是目录一的内容这是目录一的内容这是目录一的内容</p>
<base/> 标签
<head>
<title>练习</title>
<base target="_blank">
...
</head>
这样所有的跳转将是在新的窗口打开
特殊字符
<h3>特殊字符</h3>
空格符 空格符
小于号 <
大于号 >
和号 &
人名币 ¥
版权 ©
注册商标 ®
摄氏度 °
正负号 ±
乘号 ×
除号 ÷
平方 ²
立方 ³
注释标签
<!-- 注释 -->
相对路径
1.图像文件和HTML文件位于同一个文件夹：只需输入图像文件名称即可，如<img src="logo.gif"/>
2.图像文件位于HTML文件的下一级文件：输入文件夹名和文件名，之间“/”隔开，如<img src="img/imgo1/logo.gif"/>
3.图像文件位于HTML的上一级文件夹，在文件名之前加入''../",如果是上两级，则需使用“../../”,以此类推，如<img src="../logo.gif"/>
绝对路径
“D:\web\img\logo.gif”或者网络连接 如“htp://www.itcast.cn.images/logo.gif”
无序列表
无序列表是各个列表之间没有顺序级别之分，是并列的格式：
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
举个例子
<h3>你喜欢的老师</h3>
<ul>
<li>苍老师</li>
<li>小泽老师</li>
<li>麻生老师</li>
</ul>
注意：<ul>标签中只能嵌套<li>标签，其他标签或者文字不被允许
<li></li>之间可以存放其他标签
无序列表会带有自己的属性，用css修改。
有序列表
有序列表是默认有序号 如：
<h3>你喜欢的老师</h3>
<ol>
<li>苍老师</li>
<li>小泽老师</li>
<li>麻生老师</li>
</ol>
你喜欢的老师
- 苍老师
- 小泽老师
- 麻生老师
自定义标签
<h3>自定义列表</h3>
<dl>
<dt>名词</dt>
<dd>名词解释</dd>
</dl>
举例
<dl>
<dt>昌平</dt>
<dd>回龙观</dd>
<dd>天通苑</dd>
<dd>霍营</dd>
<dt>海淀</dt>
<dd>中关村地</dd>
<dd>西三旗</dd>
<dd>上地</dd>
</dl>
表格
<table> </table>
行<tr></tr> 列<td></td>
<h3>表格</h3>
<table width="500" border="20">
<tr >
<td >语文</td>
<td>数学</td>
<td>英语</td>
</tr>
<tr>
<td>80</td>
<td>80</td>
<td>80</td>
</tr>
<tr>
<td>24</td>
<td>3</td>
<td>64</td>
</tr><tr>
<td>100</td>
<td>70</td>
<td>90</td>
</tr>
</table>
表格的属性
属性名 含义 单位
border 设置表格的边框（默认=0，无边框） 像素值
cellspacing 设置单元格与单元格边框之间的空白间距 像素值（默认为2像素）
cellpadding 设置单元格内容与单元格边框之间的空白间距 像素值（默认1像素）
width 设置表格宽度 像素值
height 设置表格高度 像素值
align 设置表格在网页中的水平对齐方式
表头 <th></th>
<table width="500" border="20" cellspacing="20" cellpadding="30" align="center">
<tr >
<th>序号</th>
<th>语文</th>
<th>数学</th>
<th>英语</th>
</tr>
<tr>
<th>1</th>
<td>80</td>
<td>80</td>
<td>80</td>
</tr>
<tr>
<th>2</th>
<td>24</td>
<td>3</td>
<td>64</td>
</tr><tr>
<th>3</th>
<td>100</td>
<td>70</td>
<td>90</td>
</tr>
</table>