【Html+CSS】1. Html基础

最新推荐文章于 2024-09-07 07:17:47 发布

No veren

最新推荐文章于 2024-09-07 07:17:47 发布

阅读量124

点赞数 1

分类专栏：静态网页基础文章标签： html html5

本文链接：https://blog.csdn.net/weixin_45791200/article/details/107096348

版权

静态网页基础专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、前言与介绍

HTML（HyperText Markup Language）—— 超文本标记语言，是用于创建网页的标准标记语言，用于描述网页的内容。学习HTML，重点就是学习标签。
CSS（Cascading Style Sheets）—— 层叠样式表，用于美化网页和布局内容位置。CSS通过改变属性，来控制浏览器对于内容的渲染。
学习思路：一个标签由内容和样式组成，内容可以包括其他标签，样式包括标签的位置和外观。先了解各个标签的语义或功能，再学习如何控制他们的样式。其中，由于常见的标签较少，因此学习起来较为简单，对于其他标签，如果有需要，到时候再学习即可。对样式的学习，就相对难度较高，但同样也可以按前者的思路学习。

二、HTML

1. 标签

标签由关键字、属性和包含他们的尖括号组成，按照是否成对可以分为：双标签 和 单标签，绝大部分标签都是双标签。

双标签：<tag></tag> 单标签：<tag />
属性的写法：<tag attribute=value attribute=value ><tag />

标签是组成.html文件的基本结构，也称为元素。一个.html文件有如下基本结构，所示为Vs Code默认生成。

1.1 基本结构与分析

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

文档类型**声明标签 <!DOCTYPE>
声明网页的HTML的版本——该网页的版本为 **HTML5
- 事实上，文档类型声明标签不是html标签，而只是声明标签。
文档标签<html></html>
这个标签告诉浏览器这是个HTML文档，同时，这个标签是文档的最外层元素，是所有其他元素的容器。
语言定义属性<html lang="en">
定义当前文档的显示语言，但是只是作为对浏览器的提示，不影响语言的显示，例如谷歌浏览器默认翻译英语网页，就是检测该属性。
- en——English——英语网页
- zh-CN——Chinese——中文网页
元数据标签<meta>
这个标签提供文档的元数据，虽然这些数据不会展示，但是会被浏览器解析，它通常用于：指定网站的描述、关键词、修改时间、作者等，可以说明如何显示内容或重新加载、指引搜索引擎、Web服务调用，这些在后续会学习。
字符集（charset）声明属性<meta charset="UTF-8">
标题标签<title></title>
其中的内容指定文档的标题，并在浏览器的标签页上展示出来。
头部标签<head></head>

头部标签用于包含标题、脚本、样式、元数据等标签，是所有头部元素的容器。
主体标签<body></body>
主体标签定义文档的主体，是包含文档的内容的容器。

2. 基本标签

2.1 结构标签

结构	标签	备注
标题	`<hx></hx>`，`x`为整数1~6，标题层级递减。	标题内的文字会默认按照等级设定字体大小并加粗。
段落	`<p></p>`	段落标签之间的距离较文本行间距较大。

2.2 文本格式化标签

格式	标签	备注
加粗	`<strong></strong>` `<b></b>`
倾斜	`<em></em>` `<i></i>`
删除线	`<del></del>` `<s></s>`
下划线	`<ins></ins>` `<u></u>`

注：对文本的样式设置，实际上常使用CSS控制，而文本格式化标签则很少使用。

2.3 图片标签

<img />

图片标签中常设置的属性（前三个经常在标签中设置，后三个在CSS中设置）

属性	使用	备注
路径	`src='url'`	路径可以是相对路径（`\`）和绝对路径（`'/'`)（盘符或者网络地址）
文本替换	`alt="text"`	当图片无法显示时，用该文本替换。
图像标题	`title="text`	当鼠标在该图片上时，会提示的文本。
宽度	`width=""`	单位是像素，一般只用修改一个，另外一个默认等比例缩放。
高度	`height=""`	单位是像素，一般只用修改一个，另外一个默认等比例缩放。
边框粗细	`border=""`	单位是像素，一般通过CSS来修改。

2.4 超链接标签

<a></a> （锚anchor）

属性	使用	备注
跳转目标	`href='url'`
目标窗口弹出方式	`target=""`	`_self` 在当前窗口打开 `_blank` 在新窗口打开

按照跳转目标的不同对链接进行分类：

类型	描述	备注
外部链接、内部链接	链接到一个网页
空链接	`href="#"`	待定链接
下载链接	地址指向一个文件或者压缩包
网页元素链接	与网页元素绑定的链接
锚点链接	页面内部特定位置的链接（参考百科的目录）	写法 `<a href="#id_name"> text </a>` 在目标标签中添加属性`id=id_name`

2.5 容器标签

容器标签没有明确的语义（结构或功能等），只作为一个容器。

标签	备注
`<div></div>`	默认独占一行（块级元素）
`<span></span>`	默认可以并排（行内元素）

注：块级元素、行内元素的概念会在显示模式的版块提到。

2.6 功能标签

功能	标签	备注
强制换行	`<br/>`	使不限于文本的内容在下一行显示
水平线	`<hr>`

3. 表格标签

表格标签用于展示数据，而不是布置页面

3.1 基本结构标签

<table>
    <thead>
    	<tr> <th> ... </th> </tr>
    </thead>
    <tbody>
    	<tr> <td> content </td> ... <td> content </td></tr>
   		...
    </tbody>
</table>

结构	标签	备注
表格	`<table></table>`	标识表格
表格头部	`<thead></thead>`	分隔表格，使语义明显，可以省略
表格身体	`<tbody></tbody>`	分隔表格，使语义明显，可以省略
表格行	`<tr></tr>`	必要标签，用于包含表格的内容标签

内容	标签	备注
表头单元格	`<th></th>`	文字默认加粗、居中显示
数据单元格	`<td></td>`	用于展示表格数据

注意：表格每行单元格的数目相同，若有合并，则该合并的单元格视为两个或多个。

3.2 表格的属性

表格的属性一般通过CSS来控制

属性	属性值	描述
align	left, center, right	元素的对齐方式对表格，为表格在界面的位置对行，为行内元素相对于单元格的位置对单元格，为该单元格内的元素相对于单元格的位置
border	1 （有）或 “”（无）	表格是否有边框，默认无
cellpadding	像素值	表格的单元格边沿与其内容之间的空白，默认1px
cellspacing	像素值	表格单元格之间的空白，默认2px，当其为1px时，为黑线
width，height	像素值或百分比	表格的宽度、高度行的宽度与高度单元格的宽度与高度注意，会自动矫正

3.3 合并单元格

单元格属性

属性	属性值	描述
`rowspan=""`	跨越格数	跨行合并，向下
`colspan=""`	跨越格数	跨列合并，向右

注意：需要删除多余的单元格。

4. 列表标签

列表标签由于其整齐、整洁、有序的特点，常用于网页的布局。

列表可以分为：无序列表、有序列表、自定义列表

4.1 无序列表

<ul>
        <li> content </li>
       		   ...
        <li> content </li>
</ul>

结构	标签	备注
无序列表标签	`<ul></ul>`	标识无序列表，该标签内只能有列表项标签
列表项标签	`<li></li>`	此标签相当于一个容器，可以放置其他标签。

备注：无序标签默认在列表项前，添加小黑点，可通过样式改变。

4.2 有序列表

<ol>
        <li> content </li>
        	   ...
        <li> content </li>
</ol>

结构	标签	备注
有序列表标签	`<ol></ol>`	标识有序列表，该标签内只能有列表项标签
列表项标签	`<li></li>`	此标签相当于一个容器，可以放置其他标签。

备注：有序标签默认在列表项前，添加序号，可通过样式改变。

4.3 自定义列表

<dl>
	<dt> content_Head_1 </dt>
    <dd> content </dd>
    	   ...
    <dd> content </dd>
    <dt> content_Head_2 </dt>
    <dd> content </dd>
    	   ...
    <dd> content </dd>
</dl>

结构	标签	备注
自定义列表标签	`<dl></dl>`	标识自定义列表，该标签内只能有子标题和子内容标签
子标题标签	`<dt></dt>`	子标题并列对应多个子内容标签
子内容标签	`<dd></dd>`

5. 表单标签

表单通常由 表单域、表单控件（元素）、提示信息组成，其目的是与用户进行交互，获得用户信息。

5.1 表单域标签

标识表单，包含表单控件，实现对信息的收集和传递

<form action="url" menthod="method" name="name">
	element
</form>

属性	属性值	描述
`action="url"`	url	接收表单的地址
`method=""`	GET / POST	表单数据的提交方式
`name`	text	指定表单域的名称

5.2 表单控件（元素）标签

5.2.1 输入控件标签（重点）

<input type=value /> 该标签又根据类型属性值的不同，又可以分为多种输入控件。

通用属性	属性值	描述
`name=""`	文本	该输入控件的名称
`value=""`		该输入控件的值
`checked=""`	checked	规定首次加载该控件时被选中，主要对于选择按钮
`maxlength=""`	正整数	规定输入字段的最大长度

属性值	控件	描述
text	单行输入文本	默认宽度 20个字符 `value`作为初次加载时提前输入内容
password	单行输入密码	自动用字符隐藏输入内容
button	可点击的按钮	常用于启动脚本 `value`对于按键类，其值直接显示在按键上。
image	图片提交按钮
file	文件提交按钮
radio	单选按钮	拥有同一个`name`值的单选按钮，视为一组 `value`作为选中后，传递值。
checkbox	复选按钮	拥有同一个`name`值的复选按钮，视为一组 `value`作为选中后，传递值。
reset	重置按钮
submit	提交按钮	提交表单域内的数据。
hidden	隐藏输入字段按钮

5.2.2 下拉控件标签

<select></select>

<select>
	<option> content_1 </option>
    		   ...
    <option> content_n </option>
</select>

默认显示第一个选项，selected="selected"添加选项默认属性。

5.2.3 文本域标签

<textarea></textarea>

用于多行文本输入，常见于留言板、评论等。

<textarea>
default content
</textarea>

属性	属性值	描述
`cols=""`		每行的字符数
`rows=""`		显示的行数

5.2.4 Label标签

<lable></lable>

Label标签不是表单控件，但是经常在表单中使用。

Label标签用于绑定表单控件，当点击该标签的内容时，浏览器自动将焦点转动或者选择对应的表单元素上。

<label for="text" > UserName </label>
<input type="text" value="Please input" maxlength="11" id="text"/>

for 与控件的id的属性值对应。

No veren

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【Html+CSS】1. Html基础

文章目录一、前言与介绍二、HTML1. 标签1.1 基本结构与分析2. 基本标签2.1 结构标签2.2 文本格式化标签2.3 图片标签2.4 超链接标签2.5 容器标签2.6 功能标签3. 表格标签3.1 基本结构标签3.2 表格的属性3.3 合并单元格4. 列表标签4.1 无序列表4.2 有序列表4.3 自定义列表5. 表单标签5.1 表单域标签5.2 表单控件（元素）标签5.2.1 输入控件标签（重点）5.2.2 下拉控件标签5.2.3 文本域标签5.2.4 Label标签一、前言与介绍HTML（
复制链接

扫一扫