通信网络软件学习&# 初学者学习HTML快速导引
一.序 言
HTML简介
html全称超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。HTML 不是一种编程语言，而是一种标记语言 (markup language)，是网页制作所必备的。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。
二.学习开始
1. 学习工具
VS Code（推荐开发软件）
推荐使用VS Code，微软推出的开源文本编辑器，异常的强大，请官网下载（ VS Code 最新版）安装。
运行该软件后，点击软件界面左侧第五个图标即可进行插件安装。推荐安装以下插件：Auto Close Tag、Auto Rename Tag、Code Runner、IntelliSense for CSS、Material Icon、Open HTML in Browser、Path Intelligence等。
链接: vscode.
配置完成之后便可以开发
运行code后，请注意在File -> Auto Save 选中，如此code将自动保存我们的代码
我们要新建一个文件夹存放工程文件（要求英文）
2.http 知识初步
1）HTML的结构了解
HTML的结构是一个树状结构，在内存中形成一棵树，例如HTML结构：
<html><head><title>Demo</title></head>
<body>
<div>A<p>B</p>C</div>
<span>D</span>
</body>
</html>
那么对应的文档树为：
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<title>页面标题</title>
</head>
<body>
<h1>我的第一个Web页</h1>
<p>当前有点丑：)</p>
</body>
</html>
效果如下图
2）HTML 文档结构及常用元素
HTML文档主要是由开始标签（Opening tag）+内容（Content）+结束标签（Closing tag）=元素（Element）
开始标签（Opening tag）：包含元素的名称（本例为 p），被左、右角括号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。 结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误，这可能会产生一些奇怪的结果。 内容（Content）：元素的内容，本例中就是所输入的文本本身。 元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。例如：
<p>我很喜欢你</p>
可见完整元素由标签和内容构成
常用元素一览
段落控制标签
<html>
<head><title>静夜思</title></head>
<body>
<P align="center">
静夜思<br>
作者李白
<hr color="blue">
<P align="center">
床前明月光，疑是地上霜。<br>
举头望明月，低头思故乡。
</body>
</html>
效果如图所示
3）其他常用元素
1、字体效果
<b> 粗体字
<CODE> 用于显示编程代码
<CITE> 用于引用
<strong> 粗体字(强调)
<i> 斜体字
<em> 斜体字(强调)
<dfn> 斜体字(表示定义)
<u> 底线
<ins> 底线(表示插入文字)
<strike> 横线
<s> 删除线
<del> 删除线(表示删除)
<kbd> 键盘文字
<tt> 固定宽度的字体
<xmp> 固定宽度字体(在文件中空白、换行、定位功能有效)
<plaintext> 固定宽度字体(不执行标记符号)
<listing> 固定宽度小字体
<font> 字体(可设置size和color,face字体,)
<font style =font-size:100 px;font-family:宋体> 设置大小
二.常见的块级元素：
p：段落标签
div：把DIV看作是一容器,容器专门用来包含内容
h1、h2… …：标题
form：表单
ul：无序列表，与li绑定
ol：有序列表，与li绑定
hr：分隔
例如：
<p>当遇到br标签时换行，我要换行了</br>我换成功了</p>
<div class="a">div块</div>
<h1>标题1</h1>
<h2>标题2</h2>
<ul>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
</ul>
<hr>
<ol>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
</ol>
三、常见行内元素：
a：锚点
b：加粗
i ：斜体
img：图片
input：输入框
label：表格标签
select：下拉列表
span：用来组合文档中的行内元素
textarea：多行文本输入框
例如：
<!-- 换行 -->
<p>我可以<br>换行</p>
<!-- 水平分割线 -->
<hr>
<!-- 输入框 -->
<input>
4） 锚点 a
什么是锚点？：
1.锚点是网页制作中超级链接的一种，又叫命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接，运用相当普遍。
英文名：anchor
使用命名锚记可以在文档中设置标记，这些标记通常放在文档的特定主题处或顶部。然后可以创建到这些命名锚记的链接，这些链接可快速将访问者带到指定位置。
创建到命名锚记的链接的过程分为两步。首先，创建命名锚记，然后创建到该命名锚记的链接。
锚点的作用：
通俗简单地说，比如一篇很长的文章，你想按分段精确来看，那就可以用到锚点了。
代码：
<a href="#001">跳到001</a>
...文字省略
<a name="001" id="001" ></a>
...文字省略
其实锚点只需name就可以可，加id是为了让它兼容性更好.
href的值要跟name \ i d 一致，前面必须加"#"，以上代码在ie6/7,ff中都可以兼容，但在ie8中就不行。
因为我们锚点的值为空，为不影响美观我们加个空格就行了,
如以下代码
<a href="#001">跳到001</a>
...文字省略
<a name="001" id="001" > & n b s p </a>
...文字省略
示例代码
<a name="top">这里是TOP部分</a>
<a name="content">这里是CONTENT部分</a>
<a name="foot">这里是FOOT部分</a>
（您可以使用 id 属性来替代 name 属性，命名锚同样有效。[1]）
对于如上锚点的访问有两种方法
一种是利用超链接标签<a></a>制作锚点链接，主要用于页面内的锚点访问
<a href="#top">点击我链接到TOP</a>
<a href="#content">点击我链接到CONTENT</a>
<a href="#foot">点击我链接到FOOT</a>
5）图片及文件路径 img
使用相对路径
./或者省略不写，表示图片在当前路径下，即第一种情况
. ./ 表示文件的上一级目录，即第三种情况
/表示当前路径的下一级，即第二种情况
标签属性：
width: 取px为单位的像素值，设置图片宽度
height: 取像素值，设置图片的高度
title: 用来设置鼠标悬停于脱线上方时的显示文本
alt：当图片加载失败时显示的文本
①要显示的图片和文件在同一目录下
源码：
<body>
<img src="timg.jpeg" >
</body>
②图片在html文件的下一级
源码
<body>
<img src="img/timg.jpeg" >
</body>
③图片在html文件的上一级
源码：
<body>
<img src="../timg.jpeg" >
</body>
6）表格 Table
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
代码中，表示行, 表示行中的单元, 是表头的单元（将会加粗显示）
7） 表单 Form
用来接收用户输入的数据，并且提交给服务器。
表单二要素 : 表单元素、表单控件。
1.表单元素 ：
表单元素的标签
用来提交数据到服务器，表单控件都应书写在form标签中。标签的属性
method ： 用来设置数据的提交方式。取值：get 、post。默认是get请求方式提交。
1.1 get请求：
数据会以参数的形式拼接在url后面。
安全性较低。
最大提交数据2kb。
1.2 post
数据会打包在请求头中，隐式提交。
安全性较高。
没有数据大小限制。
2.action ： 必填。指定数据的提交地址。
enctype (encode type)指定数据的编码类型。
3.1 application/x-www-form-urlencoded（默认的编码类型）
将表单中的数据转换为字符串格式（name=zhangsan & pwd=123456),附加在url后面，使用？与url隔开。
3.2 multipart/form-data 专门用来上传特殊类型的数据，例如图片，文件，MP3等。此时数据的提交方式必须是post。
==3.3 txt/plain 数据以纯文本形式编码，==不含任何控件和格式字符。
表单基本格式
<form action="目标地址" method="发送方式" enctype="数据主体的编码方式">
<!-- 各类型的表单域 -->
<input name="NAME" value="VALUE"/>
<textarea name="NAME">VALUE</textarea>
<select name="NAME">
<option value="VALUE" selected="selected"/>
</select>
</form>
三.结语
这个实战对于我们了解html有很大的帮助，希望大家好好学习还有就是希望各位有问题可以联系博主，博主很乐意和各位一起学习。请您关注我个人的微信公众号，微信搜索h生活剪影很期待您的关注，我们一起进步。
扫一扫
1375
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
