前端零基础入门：页面结构层HTML
HTML页面结构层HTML
分以下方面学习：
HTML基础，
HTML表格，
HTML表单，
搭建网页结构
html基础
学习前端的第一门课程，为HTML基础，HTML标记语言，它是网页制作的第一步。
学习内容：
HTML概念，了解HTML发展史，基础语法，常用标签（段落，图片，链接等）
结合小例子
什么是HTML
HTML（Hypertext Markup Language）即超文本标记语言
html发展史
1993（IETF）HTML1.0
1995（W3C）HTML2.0
1996（W3C）HTML4.0
1997（W3C）HTML4.0.1
2000（W3C）XHTML1.0
2001（w3c）xhtml1.1
xhtml2.0?
2004年（WHATWG）HTML5草案
2008年（合并）HTML5正式版
2014年HTML5定稿
html特点
HTML不需要编译，直接由浏览器执行
HTML文件是一个文本文件
HTML文件必须使用HTML或htm为文件名后缀
HTML大小写不敏感，HTML与html一样
HTML是一个文本文件
HTML基础语法
学习内容
HTML基本结构
HTML标签
HTML元素
HTML属性
注解
注解：div标签为块级结构布局元素，因此将在css中结合盒模型进行讲解。
HTML基本结构
<html>
// 头部信息
<head>
<title>标题</title>
</head>
// 网页内容
<body>
网页主体内容
</body>
</html>
html标签属性
语法：
<标签名 属性名1=“属性值” 属性名2=“属性值” ...> ... </标签名>
DOCTYPE文档类型声明
<!DOCTYPE> 声明必须放在html文档第一行
<!DOCTYPE> 声明不是HTML标签
<!DOCTYPE html>
<html>
<head>
<!-- 网页头部内容 -->
<title>标题</title>
</head>
<body>
<!-- 网页主体内容 -->
</body>
</html>
网页编码设置
问题：
当网页显示出现乱码时
解决：
在<head></head>标签之间添加
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
注：utf-8，GB2312，gbk等编码
文字和段落标签
标题标签：
<h1></h1> ~ <h6></h6>
段落标签:
<p></p>
align对齐属性值：
值，描述
left 左对齐内容
right 右对齐内容
center 居中对齐内容
justify 对行进伸展，这样每行都可以有相等的长度。
换行标签：
<br/>
<p align="justify"></p>
列表标签
html标签
html标记标签通常被称为HTML标签
HTML标签是由尖括号包围的关键词
HTML标签通常是成对出
标签对中的第一个标签是开始标签，第二个标签是结束标签
什么是HTML
HTML是用来描述网页的一种语言
HTML超文本标记
无序列表
<ul>
<li>1</li>
<li>2</li>
</ul>
type属性值：
值，描述
disc：圆点
square：正方形
circle：空心圆
有序列表
语法：
<ol>
<li>1</li>
<li>2</li>
</ol>
type属性值：
值，描述：
1，数字1,2，。。。
a，小写字母a，b。。。
A，大写字母A，B。。。
i，小写罗马数字i
I，大写罗马数字I
列表标签
定义列表：
<dl>
<dt>定义列表项</dt>
<dd>1</dd>
<dd>2</dd>
<dt>列表</dt>
<dd>1</dd>
<dd>2</dd>
</dl>
定义标签内可以有多个
对于每一个
图像和超链接标签
图像标签
语法：
<img src=" " alt=" " ...>
img属性：
属性，值，描述
src，url，显示图像的Url
alt，文字，图像替代文本
height，数值和百分比，图像的高
width，数值和百分比，图像的宽
HTML路径：
相对路径
绝对路径
超链接标签
语法：
<a href=" ">内容</a>
href:链接地址，可以是内部链接或外部链接
超链接（空链接—target-title属性）
超链接标签
属性，描述
href:链接地址
target:链接的目标窗口
_self, _blank, _top, _parent
title链接提示文字
name链接命令
修饰标签和特殊符号
文字斜体：<i></i>，<em></em>
加粗：<b></b>，<strong></strong>
下标：<sub>
上标：<sup>
特殊符号：
属性，显示结果，描述
< < 小于号或显示标记
> > 大于号或显示标记
® ® 已注册
@copy; © 版权
™ ™ 商标
Space 不断行的空白
列表标签应用场景
锚链接（同一页面）
超链接标签
定义锚：
<a href="#锚名1">目录1</a>
<a href="#锚名2">目录2</a>
<a href="..." name="锚名1" >内容</a>
xxxx
<a href="..." name="锚名2">内容</a>
xxxx
在不同页面如何定义锚点
定义锚（不同页面）：
网页1：<a href="网页名称#锚名">...</a>
网页2：<a name="锚名">...</a>
html基本结构：
语法：<标签名></标签名>
例如：<html>...</html>
规范：
1,<和>括起来
2,成对出现，开始标签和结束标签，结束标签比开始标签多了一个/
HTML表格
基础表格
学习内容：
了解表格应用场景
表格基本结构
如何操作表格
表格属性
表格跨行跨列
表格嵌套
数据的展示
HTML表格
<table>表格
<tr>行
<td>单元格
若本号内容有做得不到位的地方（比如：涉及版权或其他问题），请及时联系我们进行整改即可，会在第一时间进行处理。
请点赞！因为你们的赞同/鼓励是我写作的最大动力！
欢迎关注达达的简书！
这是一个有质量，有态度的博客
