vlambda博客
学习文章列表

HTML入门详细总结

前言：”不肯下一点功夫，永远不会明白自己从何而来，又将立足于何处。“
你好，我是梦阳辰，期待与你相遇，和我一起进入HTML的世界吧！

文章目录

01.HTML概述

02.HTML实战

03.实体符号

04.表格

05.背景颜色和背景图片

06.图片标签

07.超链接

08.列表

09.表单

10.div和span在网页中的应用


01.HTML概述

1.知识的引入：
关于系统的结构：

B/S架构：
Browser/Server(浏览器/服务器的交互形式）

Browser支持哪些语言：HTML CSS JavaScript

写HTML CSS JavaScript代码的叫做：WEB前端开发工程师。

前端的图片需要UI设计师完成。

S是服务器端Server,Server端的语言有很多：如c/c++,Java,python…等等。

B/s架构的系统有什么优缺点？
优点：升级方便，只升级服务器端代码即可。维护成本低。
缺点：速度慢，体验差，界面不炫酷，无法运行大型游戏。（否则卡死)
企业内部的解决方案都是采用B/S的系统，因为办公不需要选课，只要能做数据的增删改查即可。并且维护成本低。

如：京东、腾讯视频、百度等

C/S架构
Clienet/Server(客户端/服务器端的交互形式）
缺点：升级麻烦，维护成本较高。
优点：速度快，体验好，界面炫酷。（娱乐性的系统多数是C/S架构）
如：各种app。

2.什么是HTML:？
HTML 是用来描述网页的一种语言。
它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。使用HTML语言描述的文件需要通过WWW浏览器显示出效果。

HTML:Hyper Text Markup Language(超文本标记语言）
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页

有大量的标签组成，每一个标签都有开始标签和结束标签。

<标签>
	<标签>
		<标签 属性名="属性值" 属性名="属性值">
		</标签>
	</标签>
</标签>

HTML开发的时候使用普通的文本编辑器就可以，也可以使用专业的开发工具：DreamWeaver,HBuilder…

创建的文件扩展名是.html或.htm，直接采用浏览器打开HTML文件就是运行。

HTML是谁制定的？
W3C:世界万维网联盟
制订的协议：HTML/XML/http协议/https协议
W3C制定了HTML的规范，每个浏览器厂家都会遵守。
HTML目前最高版本是：HTML5.0,简称H5

为了方便中国web前端程序员的开发的网站，提供了大量的帮助文档，为开发提供方便。
W3school:先出现，和w3c没有关系。
W3cschool:后出现，和w3c没有关系。

02.HTML实战

1.第一个HTML:

<!--
1.HTML的注释
2.加上以下代码为HTML5,不加为HTML4
3.HTML不区分大小写，语法松散
-->
<!doctype heml>
<!--根-->
<html>
	<!--头-->
	<head>
		<!--网页标题,显示在网页左上角-->
		<title>梦阳辰，你好！</title>
	</head>
	<!--体-->
	<body>
		欢迎来到HTML!
	<body>
</html>

2.基本标签

分段：

<p> 内容</p>

标题字:

<h1>标题</h1>
<h2>标题</h2>
<h3>标题</h3>
<h4>标题</h4>
<h5>标题</h5>
<h6>标题</h6>

独目标记：

换行：<!--换行-->
内容<br>内容

横线：
<hr>
<hr color='red' width='50%'>
这里单引号,双引号都可以，甚至可以不用。

预留格式：

<pre>
内容
</pre>

其他：

删除字：
<del>内容</del>

插入字：
<ins>内容</ins>

粗体字：
<b>内容</b>

斜体字：
<i>内容</i>

<!--字体标签-->:
<font color='red' size ='50'>内容</font>

数字的右上角加数：如10的平方
10<sup>2</sup>

数字的右下角加数：
10<sub>m</sub>

03.实体符号

当内容与与HMTL语法相冲突时采用实体符号。

实体符号特点：以&开始，以;结束。

b&lt;a&gt;c
<!--&lt;是小于号，&gt;是大于号-->

空格：
&nbsp;

04.表格

1.画一个表格

<!doctype html>
<html>
	<head>
		<title>表格</title>
	</head>
	<body>
		<br><br>	<!--表示换行-->
		<center><h2>信息表</h2></center>
		<hr>  <!--横线-->
		<table align="center" border="1px" width="60%" height="150px">		<!--表,居中,边框为2像素宽,宽度占比，也可用像素-->
			<tr align="center">	<!--行 ,对齐方式-->
				<td>a</td>	<!--一个小格-->
				<td>a</td>
				<td>a</td>
			</tr>
			<tr>	<!--行-->
				<td>b</td>	<!--一个小格-->
				<td>b</td>
				<td>b</td>
			</tr>
			<tr>	<!--行-->
				<td align="center">c</td>	<!--一个小格,内容的对齐方式-->
				<td>c</td>
				<td>c</td>
			</tr>
		</table>
	</body>
<html>

2.单元格合并
上下合并：删除下面的那行，上行的单元格加rowspan。
左右合并:随便删除哪个，剩余的哪个加colspan.

<!doctype html>
<html>
	<head>
		<title>单元格合并</title>
	</head>
	<body>
		<br><br>	<!--表示换行-->
		<center><h2>信息表</h2></center>
		<hr>  <!--横线-->
		<table align="center" border="2px" width="30%" height="150px">		<!--表,居中,边框为2像素宽,宽度占比，也可用像素-->
			<tr align="center">	<!--行 ,对齐方式-->
				<td>a</td>	<!--一个小格-->
				<td>a</td>
				<td>a</td>
			</tr>
			<tr>	<!--行-->
				<td>a</td>	<!--一个小格-->
				<td>a</td>
				<td rowspan="2">aaa</td>
			</tr>
			<tr>	<!--行-->
				<td align="center">a</td>	<!--一个小格,内容的对齐方式-->
				<td>a</td>
				<!--
				<td>a</td>
				-->
			</tr>
		</table>
	</body>
<html>

3.th标签
第一行字段，比td多的是加粗和居中。

<th>内容</th>
<th>内容</th>
<th>内容</th>

4.thead,tbody,tfoot标签
这三个， 将表格分割。
thead表示头，tboby表示中间内容，tfoot表示脚。

05.背景颜色和背景图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景颜色和背景图片</title>
</head>
<!--
bgcolor:设置背景色
background:设置背景图片
-->
<body bgcolor="red" background="image/ma.jpg">
asdfa
</body>
</html>

06.图片标签

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>图片</title>
    </head>
    <body>
        <img src="ma.jpg" width="100px" title="我是梦阳辰！"/><!--值设置宽度就可以了，高度会随着改变，-->
        <br><br>
        <img src="ma.jpg" height="200px"/>
        <!--img标签就是图片标签，
        src属性为路径，
        width为宽度
        titel为鼠标悬停时显示的信息
        alt设置图片加载失败时显示的提示信息
        开始标签和结束标签没有内容时，可以省略结束标签，并在前面加一个反斜杠-->
    </body>
</html>

07.超链接

通过超链接浏览器可以向服务器发送请求。

浏览器向服务器发送数据（请求：request)
服务器向浏览器发送数据（响应：response）
B/s结构的系统：每一个请求都会对应一个响应。
B–>请求—>s
s–>响应—>s

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接</title>
</head>
<body>
<a href = "http://www.baidu.com">百度一下</a><br><br><br>
<a href = "https://www.taobao.com">淘宝</a>
<!--
href:hot references 热引用
href属性为一个地址，可以是本地路径
超链接有一个target属性：
_blank：新窗口
_self:当前窗口（默认窗口)
_top:顶级窗口
_parent:父窗口
-->
<br><br><br>
<a href = "https://www.taobao.com" target="_blank">淘宝</a>
<!--
图片超链接
-->
<br><br><br>
<a href="https://www.taobao.com/">
<img src="image/ma.jpg" width="30px"/>
    淘宝
</a>
</body>
</html>

08.列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
</head>
<body>
<!--有序列表-->
<ol>
    <li>国</li>
    <li>省</li>
    <li>市
        <ol type="I">
            <li>县</li>
            <li>镇</li>
        </ol>
    </li>

</ol>
<!--无序列表-->
<ul type="circle">
    <li>梦阳辰
        <ul type="disc">
            <li>深圳</li>
            <li>北京</li>
            <li>上海</li>
        </ul>
    </li>
    <li>星空</li>
        <ul type="square">
            <li>杭州</li>
            <li>西安</li>
        </ul>
    <li>轻松玩编程</li>
</ul>
</body>
</html>

09.表单

例如以下就是一个表单：
表单用于接收用户的信息
表单展现之后，用户填写表单，点击提交后数据传入到服务器。

1.怎么画表单呢?
使用from标签画表单。
一个网页当中可以有多个表单。

<!DOCTYPE html>
<html lang="en"><head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
<!--action属性用来指定数据提交给哪个服务器。
action属性和超链接的href一样，都可以向服务器发送请求(request)
-->
<from action="http://192.168.112.34:2341/adf">
<!--    画一个提交按钮，这个按钮可以提交表单-->
    <input type="submit" value="登录"/><br>

<!--    普通按钮不具有提交表单的功能-->
    <input type="button" value="按钮上的文本"/>
</from><br>
<!--表单可以向服务器发送请求，只不过表单发送请求的同时可以携带数据-->
<from action="http://www.baidu.com">
    <input type="text"/>
    <input type="submit" value="百度"/>

</from>
<br>
<from action="http://localhost:8032/kj">
    用户名<input type = "text"/><br>
    密码<input type="password"/><br>
    <input type="submit" value="登录"/>
</from>
<from action="http://localhost:8080/jd/login">
    <table>
        <tr>
            <td> 用户名</td>
            <td><input type = "text" name="username" /></td>
        </tr>
        <tr>
            <td>密码</td>
            <td><input type="password" name ="usercode"/></td>
        </tr>
        <tr align="center">
            <td colspan="2">
                <input type="submit" value="登录"/>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input type="reset"  value="重置"/>
            </td>
        </tr>
    </table>
</from>
</body>
</html>

method不指定，为get.

超链接也可以提交数据给服务器，但是提交的内容是不变的。默认为get。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
用户注册
用户名
姓名
密码
确认密码
性别
兴趣爱好
学历
简介-->


<from action="http://localhost:8080/jd/register" mothod="post">
    用户名
    <input type="text" name="username"/>
    <br>
    密码
    <input type="password" name="usercode"/>
    <br>
    确认密码
    <input type="passcode"/>
    <br>
    性别
    <input type="radio" name="gender" value="1" checked/>男<!--默认选中-->
    <input type="radio" name ="gender" value="0"/>女<!--单选按钮必须手动指定-->
    <br>
    兴趣爱好
    <input type="checkbox" name="hobby" value="basketball" checked/>篮球
    <input type="checkbox" name="hobby" value="study"/>学习
    <input type="checkbox" name="hobby" value="game"/>游戏
    <br>
    学历
    <select name="grade">
        <option value="HighSchool">高中</option>
        <option value="Bachelor'sDegree" selected>本科</option>
        <option value="Master'sDegree">硕士</option>
        <option value="DoctoralDegree">博士</option>
    </select>
    <br>
    简介
    <br>    <textarea rows="10" cols="66" name="introduce"></textarea>
    <br>
    <input type="submit" value="注册"/>
    <input type="reset" value="清空"/>
</from>
</body>
</html>

3.下拉列表支持多选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--muultiple属性支持多选，size显示条目数-->
    <select multiple="multiple" size="2">
        <option>浙江</option>
        <option>湖北</option>
        <option>江西</option>
    </select>
</body>
</html>

4.file控件

可以用于选择文件，上传
<input type="file"/>

5.隐藏域hidden控件
用于将数据提交给服务器，但不想让用户看见

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <from action="http://localhost:8080/asdf" method="post">
        <input type="hidden" name="userid" value="111"/>
        用户代码<input type="text" name="usercode"/>
        <input type="submit" value="提交"/>
    </from>
</body>
</html>

5.readonly和disabled
都表示只读。
但是readonly可以提交给服务器，disabled数据不会提交（即使有name属性也不会）

<input type="text" name ="usercode" value="112" readonly/>
<input type="text" name ="usercode" value="112" disabled/>

6.input控件的maxlength属性
表示最多输入的字符数量。

7.HTML中元素的id属性
1.在HTML文档中，任何元素（节点）都有id属性，id属性是该节点的唯一标识。所以在同一个HTML文档当中id值不能重复。

2.提交表单只和name有关

3.id的作用
为了让我们更好的获取元素。

javascript语言：可以对HTML文档当中的任意节点进行增删改操作！那么我们应该先通过id拿到节点对象。

4.HTML文档是一棵树，树上有很多节点，每个节点都有唯一的id.
DOM（Document)树。

<from id="myform">
<input type ="text" id="username" name="username"/>

<input type ="text" id="usercode" name="usercode"/>
</form>

10.div和span在网页中的应用

1.div和span都可以称为图层。
图层是为了页面更好的布局，学过ps的小伙伴就估计知道图层的概念。


div会独自占用一行，而span不会独自占用一行。
table布局不灵活，太石板。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>hello Meng</div>
    <div>hello Yangv>

    <div>Chen
    <div>Xingkongiv>

    <span id="sqan1">first span</span>
    <span id="sqan1">second span</span>
</body>
</html>


推荐阅读

[5.05] 暗喻幻想港中35周年限定版1.03+DLC+金手指+王中王存档 [5.05] 暗喻幻想港中35周年限定版1.03+DLC+金手指+王中王存档
C语言笑谈：C语言超级搞笑的代码，冷笑话我们程序员也会讲的啊！ C语言笑谈：C语言超级搞笑的代码，冷笑话我们程序员也会讲的啊！

相关文章