HTML学习文档

最新推荐文章于 2024-06-16 15:31:20 发布

清沐沐

最新推荐文章于 2024-06-16 15:31:20 发布

阅读量292

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/qq_48930699/article/details/121051136

版权

本文是HTML的基础教程，涵盖了HTML的体系结构、定义及其制定者W3C。讲解了B/S和C/S架构的优缺点，以及HTML的基本标签如段落、标题、超链接、列表和表格。此外，还介绍了实体符号、表格的合并、背景设置、超链接的工作原理、表单元素以及ID属性和div与span的用法。内容详实，适合初学者入门。

摘要由CSDN通过智能技术生成

1.HTML概述

（1）体系结构

1.B/S架构： Browser/Server (浏览器/服务器的交互形式)
Browser支持哪些语言：HTML,CSS,JavaScript *
Server支持的语言：C，C++，Java，Python

B /S架构的系统有什么优点和缺点？

优点：升级方便，只升级服务器端代码即可。
缺点：速度慢，体验不好，界面不炫酷。
企业内部的解决方案都是采用B/S架构的系统，因为企业内部办公需要的一些系统不需要炫酷，不需要特别好的用户体验，只要能做好数据的增删改查即可。并且企业内部更注重维护的成本。
B/S架构的系统代表：京东，百度，天猫……

2.C/S架构： Client/Server(客户端/服务器的交互形式。）

缺点：升级麻烦，维护成本高。
优点：速度快，体验好，界面炫酷。（娱乐型的系统多数是C/S架构的）
常见的C/S架构的系统：QQ，微信，支付宝……

（2）HTML定义

HTML：Hyper Text Markup Language(超文本标记语言)
由大量的标签组成，每一个标签都有起始标签和结束标签。
不是编程语言，告诉浏览器如何编写网页。

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

超文本：流媒体，图片，声音，视频….

HTML开发的时候使用普通的文本编辑器就行，创建的文件扩展名是.html或者.htm\。
HTML也有专业的开发工具，例如：DreamWeaver,HBuilder…
直接采用浏览器打开HTML文件就是运行.

（3）HTML制定者

W3C：世界万维网联盟
W3C制定了HTML的规范，每个浏览器生产厂家都会遵守规范。HTML程序员也会按照这个规范去写代码。
HTML规范目前的最高版本是：HTML5.0，简称H5.

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

2. 第一个html页面

<!--
	1、这是HTML的注释
	2、HTML不区分大小写，语法松散不严格。
-->
<!doctype html>//解释文档类型，加上该代码表示HTML5语法，去掉就表示HTML4.0

<!--根-->
<html>

	<!--头-->
	<head>
		<!--网页标题，显示在网页左上角-->
		<title>网页的标题</title>
	</head>

	<!--体-->
	<body>
		网页的主体内容，欢迎学习HTML！
	</body>
	
</html>

3.基本标签

块级元素：在页面以块的形式展现，出现新的一行，占全部宽度。< div > ,< h1 >,< p >
内联元素：通常在块级元素内，不会导致文本换行，只占必要的文本宽度.< a > , < img >

<!doctype html>
<html>
	<head>
		<title>HTML的基本标签</title>
	</head>
	<body>
		
		<!--段落标记-->
		<p>《黛玉葬花》是文学名著《红楼梦》中的经典片段。林黛玉最怜惜花，觉得花落以后埋在土里最干净，说明她对美有独特的见解。她写了葬花词，以花比喻自己，在《红楼梦》中是最美丽的诗歌之一。贾宝玉和林黛玉在葬花的时候有一段对话，成为《红楼梦》中一场情人之间解除误会的绝唱。</p>
		<!--标题字：是HTML预留的格式，和word中的标题字相同-->
		<h1>标题字</h1>
		<h2>标题字</h2>
		<h3>标题字</h3>
		<h4>标题字</h4>
		<h5>标题字</h5>
		<h6>标题字</h6>

		<!--换行标记，br标签是一个独目标记-->
		hello 
		world!
		hello <br>world!

		<!--横线，独目标记-->
		<hr>
		
		<!--color和width都是hr标签的属性-->
		<hr color="red" width="50%">
		<!--语法太松散了。-->
		<hr color='green' width=30%>

		<!--预留格式-->
		<pre>
		for(int i = 0; i < 10; i++){
			System.out.println("i = " + i);
		}
		</pre>

		<del>删除字</del>
		<ins>插入字</ins>
		<b>粗体字</b>
		<i>斜体字</i>

		10<sup>2</sup>

		10<sub>m</sub>

		<!--字体标签-->
		<font color="red" size="50">字体标签</font>

	</body>
</html>

图片运行结果如图

4.实体符号

当使用的代码与html代码有冲突时，就会使用实体符号。如>和<就会与html代码中<>冲突，电脑将不能识别而＝是可以识别的并不冲突。在html页面中无论输入多少个空格符号，都将不会显示，需使用实体符号。

实体符号特点：以 ‘& ’ 开始，以’ ; '结束.
常用的实体符号：
（1）大于号> :（&gt；）
（2）小于号< :（&lt，）
（3）空格 :（&nbsp；）

5.表格

（1）表格的基本标签

表格：< table >；
行：< tr >；
每一行的单元格：< td > 。
< th >标签也是单元格标签，比< td >多的是居中、加粗。.

<!doctype html>
<html>
	<head>
		<title>表格</title>
	</head>
	<body>
		<center><h1>员工信息列表</h1></center>
		<hr>
		<!--
			border="1px" 设置表格的边框为1像素宽度。
			width 宽度
			height 高度
		-->
		<!--
		<table border="1px" width="300px">
		-->
		<table align="center" border="1px" width="60%" height="150px">
			<!--align对齐方式-->
			<tr align="center">
				<td>a</td>
				<td>b</td>
				<td>c</td>
			</tr>
			<tr>
				<td>d</td>
				<td>e</td>
				<td>f</td>
			</tr>
			<tr>
				<td>x</td>
				<td>y</td>
				<td align="center">z</td>
			</tr>
		</table>

	</body>
</html>

（2）相邻单元格合并

rowspan：行合并，row合并的时候，删除“下面的”单元格。
colspan：列合并，col合并的时候，对删除哪个没有要求。

<!doctype html>
<html>
	<head>
		<title>表格单元格合并，以及th标签</title>
	</head>
	<body>
		
		<!--注意事项：
			1、row合并的时候，删除“下面的”单元格
			2、col合并的时候，对删除哪个没有要求。
		-->
		<table border="1px" width="50%">
			<tr>
				<!--
				<td>员工编号</td>
				<td>员工薪资</td>
				<td>部门名称</td>
				-->
				<!-- th 标签也是单元格标签，比td多的是居中、加粗。-->
				<th>员工编号</th>
				<th>员工薪资</th>
				<th>部门名称</th>
			</tr>
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
			</tr>
			<tr>
				<td>a</td>
				<td>b</td>
				<td rowspan="2">f</td>
			</tr>
			<tr>
				<td colspan="2">d</td>
				<!--
				<td>f</td>
				-->
			</tr>
		</table>
	</body>
</html>

（3）表格三部分

< thead >, < tbody >, < tfoot >


<!doctype html>
<html>
	<head>
		<!--这行代码的作用是告诉浏览器采用哪一种字符集打开当前页面。
		注意：并不是设置当前页面的字符编码方式。-->
		<meta charset="gbk">
		<title>thead tbody tfoot 在table中不是必须的，只是这样做便于后期的JS代码的编写。</title>
	</head>
	<body>
		
		<table border="1px" width="50%">
			<!--头-->
			<thead>
				<tr>
					<th>员工编号</th>
					<th>员工薪资</th>
					<th>部门名称</th>
				</tr>
			</thead>

			<!--体-->
			<tbody>
				<tr>
					<td>1</td>
					<td>2</td>
					<td>3</td>
				</tr>
				<tr>
					<td>a</td>
					<td>b</td>
					<td rowspan="2">f</td>
				</tr>
				<tr>
					<td colspan="2">d</td>
				</tr>
			</tbody>

			<!--脚-->
			<tfoot>
				<tr>
					<td>1</td>
					<td>2</td>
					<td>3</td>
				</tr>
			</tfoot>

		</table>
	</body>
</html>

6.背景

（1）背景颜色

 < bgcolor ="red" >

（2）背景图片

  <background =" img.png">

图片：

<img src="img/bd_logo.png" width="100px" title="我是百度图片哦" alt="图片找不到哦！"/>

设置图片宽度和高度的时候，只设置宽度，高度会等比例缩放。
img标签就是图片标签。
src属性是图片的路径。
width设置宽度，height设置高度。
title设置鼠标悬停时显示的信息。
alt设置图片加载失败时显示的图片信息。

7.超链接

<a href="http://www.baidu.com">百度</a>

href：hot reference热引用，href属性后面一定是一个资源的地址。
超链接的特点：（1）有下划线，（2）鼠标停留在超链接上面显示小手形状，（3）点击超链接之后还能跳转页面。
超链接有个target属性可取值：(1)新窗口：_blank;（2）当前窗口：_self;（3）顶级窗口：_top;（4）父窗口：_parent。
超链接的作用：通过超链接可以从浏览器向服务器发送请求。浏览器向服务器发送数据（请求：request），服务器向浏览器发送数据（响应：response）。
用户点击超链接和用户在浏览器地址栏上直接输入URL，本质上没有区别，都是向服务器发送请求；从操作上来讲，超链接使用更方便。

8.列表

（1）无序列表

type属性：circle,square,disc

<ul>中国
	<li>北京</li>
	<li>上海</li>
	<li>武汉</li>
</ul>

（2）有序列表

type属性：1,a, A

<ol>水果
	<li>苹果</li>
	<li>西瓜</li>
	<li>桃子</li>
</ol>

9.表单

表单作用：收集用户信息、表单展现之后，用户填写表单，点击提交按钮提交给服务器。
使用form标签画表单，一个网页中可以有多个表单。
表单最终是需要提交数据给服务器的，form标签有个action属性，这个属性用来指定服务器地址（类似超链接中的href属性）。
form表单method属性：
（1）get：用户提交的信息会显示在浏览器的地址栏上。
（2）post：用户提交的信息不会显示在浏览器的地址上。
当用户提交的信息中含有敏感信息，例如密码时，建议采用post方式提交。

<form action="http://www.baidu.com" method="post">
	用户名：<input type="text" name="username"/><br>
	密码：<input type="password" name="userpwd"/><br>
	确认密码：<input type="password"><br>
	<!--checked默认选中，单选按钮的value必须手动指定-->
	性别：<input type="radio" name="gender" value="1"/>男
          <input type="radio" name="gender" value="2" checked/>女<br>
    兴趣爱好：
    <input type="checkbox" name="interest" value="reading">阅读
    <input type="checkbox" name="interest" value="running">跑步
    <input type="checkbox" name="interest" value="singing">唱歌<br>
    学历：
    <select name="grade">
    	<option value="gz">高中</option>
    	<option value="dz">大专</option>
    	<option value="bk" selected>本科</option><!--selected默认选中-->
    	<option value="ss">硕士</option>
    </select>
    <br>
    简介：<!--文本域没有value属性，用户所填内容就是value-->
    <textarea rows="10" cols="60" name="introduce"></textarea><br>
    <!--file控件，文件上传专用-->
    <input type="file"/>
    <!--隐藏域：网页上看不到，但是表单提交的时候数据会自动提交给服务器。-->
    <input type="hidden" name="userid" value="111">
	<!--按钮的value属性显示文本信息-->
	<input type="submit" value="提交"/><!-- 提交按钮-->
	<input type="button" value="设置按钮上显示的文本"/><!--普通按钮-->
	<input type="reset" value="清空">
</form>

表单项写了name属性的，一律会提交给服务器。不想提交这一项，就不要写name属性
文本框和密码框的value不需要程序员指定，用户输入什么，value就是什么。
当name没有写的时候，该项不会提交给服务器。但是当value没有写的时候，value的默认值是空字符串" "，会将空字符串提交给服务器。
下拉列表支持多选,按住ctrl键才可以多选。multiple支持多选的，size设置显示条目数量。

<select multiple="multiple" size="2">

10.id属性

在HTML文档中，任何元素（节点）都有id属性，id属性是该节点的唯一标识，所以在同一个HTML文档当中id值不能重复。
注意，表单提交数据的时候，只和name有关系，和id无关。
id作用：让我们更方便获取元素。

（1）javascrip语言，可以对HTML文档当中的任意节点进行增删改操作

（2）javascrip在对文档进行增删改操作前，需要拿到这个节点，通常我们通过id来拿节点对象。
HTML文档是一棵树，树上有很多节点，每一个节点都有唯一的id（DOM）树。

11.div与span

div和span作用：div和span都可以称为“图层”，图层的作用是为了保证页面可以灵活的布局。
图层就是一个一个的盒子，div嵌套div就是盒子嵌套盒子。
div和span是可以定位的，只要定下div的左上角的x轴和y轴坐标即可。
其实最早的网页采用table进行布局的，但是table不灵活，太死板。现代网页开发中div布局使用较多。
div和span的区别：div独自占用一行（默认情况下），span不会独自占用一行。

<div id="div1">我是一个DIV</div>
<div id="div2">我是一个DIV</div>

<span id="span1">我是一个SPAN标签</span>
<span id="span2">我是一个SPAN标签</span>

<div id="div3">
	<div>
		<div>text</div>
	</div>
</div>