HTML总结

最新推荐文章于 2022-06-23 10:19:13 发布

echo婷

最新推荐文章于 2022-06-23 10:19:13 发布

阅读量117

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/zt2494653702/article/details/109667419

版权

本文详细介绍了HTML的基本概念，包括超文本的定义、页面结构元素（如`<html>`、`<head>`、`<body>`）及其关系，以及关键标签如标题、段落、链接和表格的使用。此外，还涵盖了文本格式化、图像和表单元素的实例。

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

一 HTML简介

1.1 定义

HTML 指的是超文本标记语言，是用来描述网页的一种语言。它不是一种编程语言，而是一种标记语言

什么是超文本？

可以加入图片、声音、动画、多媒体等内容（超越文本限制）
可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本 ）

1.2 HTML骨架

标签名	定义	说明
html	HTML标签	页面中最大的标签，我们成为根标签
head	文档的头部	注意在head标签中我们必须要设置的标签是title
titile	文档的标题	让页面拥有一个属于自己的网页标题
body	文档的主体	元素包含文档的所有内容，页面内容基本都是放到body里面的

1.3 HTML标签关系

（1）嵌套关系（父子关系）

<head>  
	<title> </title> 
</head>

（2）并列关系（兄弟关系）

<head></head>
<body></body>

1.4 页面语言

<html lang="en">

最常见的2个：

en定义语言为英语
zh-CN定义语言为中文

1.5 字符集

<meta charset="UTF-8" />

utf-8是目前最常用的字符集编码方式，常用的字符集编码方式还有gbk和gb2312。

gb2312 简单中文包括6763个汉字
BIG5 繁体中文港澳台等用
GBK包含全部中文字符是GB2312的扩展，加入对繁体字的支持，兼容GB2312
UTF-8则基本包含全世界所有国家需要用到的字符

二 HTML常用标签

2.1 排版标签

2.1.1 标题标签h

标题标签：作为标题使用，并且依据重要性递减

<h1>   标题1   </h1>
<h2>   标题2   </h2>
<h3>   标题3   </h3>
<h4>   标题4   </h4>
<h5>   标题5   </h5>
<h6>   标题6   </h6>

2.1.2 段落标签p

可以把 HTML 文档分割为若干段落，默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行。

<p>  文本内容  </p>

2.1.3 水平线标签hr

在网页中常常看到一些水平线将段落与段落之间隔开，使得文档结构清晰，层次分明。

<hr />是单标签

2.1.4 换行标签br

<br />

2.1.5 div和span标签

div和span是没有语义的，是我们网页布局主要的2个盒子

<div> 这是头部 </div>    
<span>今日价格</span>

区别：

div标签用来布局的，但是现在一行只能放一个div
span标签用来布局的，一行上可以放好多个span

2.2 文本格式化标签

在这里插入图片描述

2.3 图像标签

<img src="图像URL" />

在这里插入图片描述

2.4 链接标签

<-- 其中_self为默认值，__blank为在新窗口中打开方式。 -->
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

注意：

外部链接：需要添加 http://
内部链接：直接链接内部页面名称即可比如 < a href=“index.html”> 首页
如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。
不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。

2.5 补充

2.5.1 锚点定位

通过创建锚点链接，用户能够快速定位到目标内容。

使用相应的id名标注跳转目标的位置。 (找目标)
使用a href="#id名"创建链接文本（被点击的）

  <h3 id="two">第2集</h3> 
  <a href="#two">

2.5.2 base标签

<base target="_blank" />

注意：

base 写到head之间
把所有的连接都默认添加 target="_blank"

2.5.2 特殊字符

在这里插入图片描述

三表格

3.1 创建表格

<table>
  <tr>
    <td>单元格内的文字</td>
    <th>表头</th>
  </tr>
  ...
</table>

注意：

table用于定义一个表格标签。
tr标签用于定义表格中的行，必须嵌套在 table标签中。
td 用于定义表格中的单元格，必须嵌套在tr标签中，td标签可以容纳其他的元素
th表示表格的表头

3.2 表格属性

三参为0，平时开发的我们这三个参数 border cellpadding cellspacing 为 0
在这里插入图片描述

<table width="500" border="1" align="center" cellspacing="0" cellpadding="0">
	<tr>  
		<th>姓名</th> 
		<th>性别</th>
		<th>电话</th>
	</tr>
	<tr>
		<td>小王</td>
		<td>女</td>
		<td>110</td>
	</tr>
	<tr>
		<td>小明</td>
		<td>男</td>
		<td>120</td>
	</tr>	
</table>

3.3 表格标题

caption 元素定义表格标题，通常这个标题会被居中且显示于表格之上。
caption 标签必须紧随 table 标签之后。

<table>
   <caption>我是表格标题</caption>
</table>

3.5 合并单元格

跨行合并：rowspan=“合并单元格的个数”
跨列合并：colspan=“合并单元格的个数”

步骤：

先确定是跨行还是跨列合并
根据先上后下先左后右的原则找到目标单元格然后写上合并方式还有要合并的单元格数量比如：
删除多余的单元格单元格

四列表

4.1 无序列表ul

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ul>

注意：

ul中只能嵌套li，直接在ul标签中输入其他标签或者文字的做法是不被允许的。
li与/li之间相当于一个容器，可以容纳所有元素。
无序列表会带有自己样式属性，放下那个样式，一会让CSS来！

4.2 有序列表ol

<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ol>

实际开发中用的很少

4.3 自定义列表

<dl>
  <dt>名词1</dt>
  <dd>名词1解释1</dd>
  <dd>名词1解释2</dd>
  ...
  <dt>名词2</dt>
  <dd>名词2解释1</dd>
  <dd>名词2解释2</dd>
  ...
</dl>

五表单

5.1 表单组成

表单控件：
包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。
提示信息：
一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。
form表单域：
可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。

5.2 input 控件

在这里插入图片描述

1. type 属性

这个属性通过改变值，可以决定了你属于那种input表单。
比如 type = ‘text’ 就表示文本框可以做用户名，昵称等。
比如 type = ‘password’ 就是表示密码框用户输入的内容是不可见的。

用户名: <input type="text" /> 
密  码：<input type="password" />

2. value属性

用户名:<input type="text"  name="username" value="请输入用户名">

3. name属性

name是表单的名字，这样，后台可以通过这个name属性找到这个表单。页面中的表单很多，name主要作用就是用于区别不同的表单。

name属性后面的值，是我们自己定义的。
radio，设置name属性后，变为单选

用户名:<input type="text"  name=“username” />

4. checked属性

表示默认选中状态。较常见于单选按钮和复选按钮。

<input type="radio" name="sex" value="男" checked="checked" />男

5.3 label标签

用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。
（1）第一种用法就是用label直接包括input表单。

<label> 用户名： <input type="radio" name="usename" value="请输入用户名">   </label>

（2）第二种用法 for 属性规定 label 与哪个表单元素绑定。

<label for="sex">男</label>
<input type="radio" name="sex"  id="sex">

5.4 textarea控件(文本域)

<textarea >
  文本内容
</textarea>

通过textarea控件可以轻松地创建多行文本输入框.
cols=“每行中的字符数” rows=“显示的行数” 我们实际开发不用

5.5 select下拉列表

如果有多个选项让用户选择，为了节约空间，我们可以使用select控件定义下拉列表

<select>
  <option>选项1</option>
  <option>选项2</option>
  <option>选项3</option>
  ...
</select>

注意：

select中至少包含一对option
在option 中定义selected =" selected "时，当前项即为默认选中项。
但是我们实际开发会用的比较少

5.6 form表单域

在HTML中，form标签被用于定义表单域，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。

<form action="url地址" method="GET/POST" name="表单名称">
  各种表单控件
</form>

echo婷

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

HTML总结

一 HTML简介

1.1 定义

1.2 HTML骨架

1.3 HTML标签关系

1.4 页面语言

1.5 字符集

二 HTML常用标签

2.1 排版标签

2.1.1 标题标签h

2.1.2 段落标签p

2.1.3 水平线标签hr

2.1.4 换行标签br

2.1.5 div和span标签

2.2 文本格式化标签

2.3 图像标签

2.4 链接标签

2.5 补充

2.5.1 锚点定位

2.5.2 base标签

2.5.2 特殊字符

三 表格

3.1 创建表格

3.2 表格属性

3.3 表格标题

3.5 合并单元格

四 列表

4.1 无序列表ul

4.2 有序列表ol

4.3 自定义列表

五 表单

5.1 表单组成

5.2 input 控件

1. type 属性

2. value属性

3. name属性

4. checked属性

5.3 label标签

5.4 textarea控件(文本域)

5.5 select下拉列表

5.6 form表单域

三表格

四列表

五表单