1.HTML语言
1.1简介
HTML :超文本标记语言(HTML HyperText Markup Language )。其它的就不过多介绍了.（但是呢，在浏览器上运行时是需要将所有的资源都渲染完后才执行的哦）
1.2 常用的主流浏览器
- 谷歌浏览器(chrome)
- 火狐浏览器(firefox)
- 欧鹏浏览器(opera)
1.3 前端的常用开发工具
VSCode 、 Sublime 、 Dreamweaver、 WebStorm、 HBuilder
这里给出VSCode的下载链接，https://vscode.en.softonic.com/
2 HTML语法
接下来就直接进行代码的用法展示，小伙伴可以在自己的电脑上运行看看效果：
2.1文档基本结构
HTML5标准模板：
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<!-- 这里是html注释 -->
hello world!
</body>
</html>
- HTML语言不区分大小写。
- meta标签提供关于HTML文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。它可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。
2.2 head部分的HTML标签
（在2.1也可以看到，这里就不再赘述）
2.3 body部分的HTML标签
2.3.1 常用HTML标签
- 标题标签（块级标签：独占一行）
- 段落标签（块级标签：独占一行）
- 换行标签（单标签）
- 图片标签（内联标签：不独占一行）（单标签）
<!--
图片标签属性：
src：图片地址
alt：图片的替代文字
title：鼠标悬停提示文字
-->
<img src="img/qiu.jpg" alt="秋天的景色" title="秋天的景色">
- 超链接标签（内联标签：不独占一行：a标签中可以放置任何可视标签，比如：img、h1、p等。
- 使用超链接标签实现锚记
<!--
什么是锚记：
当一个页面的内容过长时，浏览起来就会非常的费劲，需要不停的来回拖动。
解决方案是：可以在页面上的某个内容处设置锚记，然后使用超链接快速跳转到此处。
所以说：锚记类似于书签的功能。
-->
<a href="#shuqian">书签</a>
<p>页面内容1</p>
<p>页面内容2</p>
<p>页面内容3</p>
<p>页面内容4</p>
<p>页面内容5</p>
<p>页面内容6</p>
<p id="shuqian">页面内容7</p>
<p>页面内容8</p>
2.3.2绝对路径与相对路径
文档路径有两种：
绝对路径：以最原始位置为基准。
如果访问本机资源，以盘符开始：D:/javaspace/JDBCTest/src/test/index.jpg
如果访问非本机资源，以网络协议开始：http://hao.360.cn/admin/admin.html
相对路径：以当前位置为基准（例如：当前位置是test），而且不能以 / 开始。
admin/login/index.jpg 或者 ./admin/login/index.jpg（./代表当前目录 ../代表上一级目录
2.3.3.列表标签
1.无序列表
2.有序列表
3.自定义列表
<!--
dl：声明定义列表
dt：声明列表项
dd：定义列表项内容
-->
<dl>
<dt>HTML</dt>
<dd>制作网页的标准语言，控制网页的结构</dd>
<dt>CSS</dt>
<dd>层叠样式表，控制网页的样式</dd>
<dt>JavaScript</dt>
<dd>脚本语言，控制网页的行为</dd>
</dl>
2.3.4.表格标签
表格标签多用于显示表数据。基本结构如下：
<!--
表格标签：
table：整个表格的最外层标签
tr：行标签
th：表格标题标签
td：列标签，一个td，就是一个单元格
表格标签属性：
border：边框宽度
-->
<table border="1">
<tr>
<th>第一列</th>
<th>第二列</th>
</tr>
<tr>
<td>这是第一行第一列</td>
<td>这是第一行第二列</td>
</tr>
<tr>
<td>这是第二行第一列</td>
<td>这是第二行第二列</td>
</tr>
</table>
表格合并：表格合并中两个重要属性：
colspan：合并列
rowspan：合并行
<table border="1">
<tr>
<td colspan="2">这是第一行第一列</td>
<td>这是第一行第三列</td>
</tr>
<tr>
<td rowspan="2">这是第二行第一列</td>
<td>这是第二行第二列</td>
<td>这是第二行第三列</td>
</tr>
<tr>
<td>这是第三行第二列</td>
<td>这是第三行第三列</td>
</tr>
</table>
2.3.5.2.form标签
<!--
form是表单最外层标签。
action属性：提交服务器地址
method属性：提交方式：get、post
-->
<form action="XXXX" method="get">
… … …
</form>
2.3.5.3.其它标签
文本框
<!-- placeholder属性为HTML5新增属性：提供可描述输入字段预期值的提示信息 -->
<input type="text" placeholder="用户名" value="zhangsan" />
密码框
<input type="password"/>
单选按钮
<input type="radio" name="sex" value="0" checked="true"/>男
<input type="radio" name="sex" value="1"/>女
复选框
<input type="checkbox" name="like" value="0" checked=" true" />读书
<input type="checkbox" name="like" value="1" />体育
<input type="checkbox" name="like" value="2" />游戏
下拉列表
<select name="nationality">
<option value="0" selected="true">中国</option>
<option value="1">美国</option>
<option value="2">英国</option>
</select>
文件域
<input type="file" name="files" />
文本域
<textarea name="brief" rows="5" cols="30">--这里输入个人简介--</textarea>
提交按钮
<!-- 将表单全部内容，提交给action属性指定的服务器。一个表单都应该有一个提交按钮。-->
<input type="submit" value="提交" />
重置按钮
<input type="reset" value="重置" />
普通按钮
<input type="button" value="点击我">
<button>点击我</button>
2.3.5.4.表单中的一些属性
<!--
readonly： 不可编辑,但可以选择和复制;值可以传递到后台
disabled： 不能编辑,不能复制,不能选择;值不可以传递到后台
checked： 设置单选按钮和复选按钮的默认选中项
selected： 设置下拉列表option的默认选中项
注意：以上都属于布尔类型的属性，布尔类型属性都有以下三种写法：
checked="true"
checked="checked"
checked
这三种写法的效果都是一样的。
-->
<input type="text" name="username" readonly/>
<input type="text" name="username" disabled/>
2.3.6.容器标签div与span
div标签：块级标签，可以在某块区域中指定出一块区域内容。其本身没有任何视觉上的效果。
<div>
<h1>html语言</h1>
<p>html语言是超文本标记语言</p>
</div>
span标签：内联标签，可以在一行中指定出一段内容。其本身没有任何视觉上的效果。
<p>今天气温<span>40</span>度</p>
扫一扫
1476
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
