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

href:hot references 热引用
href属性为一个地址，可以是本地路径
超链接有一个target属性：
_blank：新窗口
_self:当前窗口（默认窗口)
_top:顶级窗口
_parent:父窗口

<!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>

2.用户注册表单
form表单method属性：
get:采用get方式提交的时候，用户提交的信息会显示在浏览器的地址栏上。
post：采用post方式提交的时候，用户提交的信息不会显示在浏览器的地址栏上。post更安全

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>


©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 212,454评论 6赞 493
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,553评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 157,921评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,648评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,770评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,950评论 1赞 291
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,090评论 3赞 410
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,817评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,275评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,592评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,724评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,409评论 4赞 333
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,052评论 3赞 316
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,815评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,043评论 1赞 266
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,503评论 2赞 361
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,627评论 2赞 350