快速复习HTML

最新推荐文章于 2024-08-04 20:38:28 发布

要七在努力

最新推荐文章于 2024-08-04 20:38:28 发布

阅读量108

点赞数

文章标签： html

本文链接：https://blog.csdn.net/ghostseven777/article/details/130404221

版权

1.HTML简介

2.HTML格式

3.HTML标签

1.主题结构标签：html、head、body

2.head内标签：title、meta

3.格式排版标签：div、h1~h6、p

4.一些常用的标签：br、hr、pre

5.文本标签：em、strong、del、ins、sup、sub

1.HTML简介

全称：HyperText Markup Language（超文本标记语言）。

文件后缀名：.html

语义化标签：

html标签注重的是他的语义，用特定的标签，表示特定的含义。所构成一个规范的格式，更有利于搜索引擎的优化和解析。对其标签默认属性并不侧重，其属性均可通过css进行修改和美化。

2.HTML格式

注释：

文档声明：<! DOCTYPE html>

html字符编码：<meta charset = "UTF-8" />

html语言设置：<html lang="zh-CN></html>

格式：

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>题目</title>
    </head>
    <body>

    </body>
</html>

3.HTML标签

1.标签名不区分大小写，但推荐小写，因为小写更规范。

2.双标签： <标签名> 标签体 </标签名>

3.单标签：<标签名 /> 注：/ 可以省略

4.标签的属性：<标签名属性名="属性值">

1.主题结构标签：html、head、body

<head></head> 标签头

<body></body> 标签体

2.head内标签：title、meta

<title></title> 页面标题

3.格式排版标签：div、h1~h6、p

<div></div> 盒子标签-块级

<h1></h1> 1~6 标题标签-块级

<p></p> 段落标签-块级

<span> 文本标签-内行

4.一些常用的标签：br、hr、pre

<br /> 换行

<hr /> 分割线

<pre></pre> 按原文显示

5.文本标签：em、strong、del、ins、sup、sub

<del>以删除的内容</del>

<ins>新添的内容</ins>

6.图片标签：img

标签格式：<img />

常用属性：

arc：图片路径

alt：图片描述

width：图片宽度

height：图片高度

border：边框

7.超链接：a

格式：<a hraf="跳转内容"></a>

常用属性：

href：指定要跳转到的具体目标。

target：控制跳转时如何打开页面，常用值如下：

_self：在本窗口打开

_blank：在新窗口打开

id：元素的唯一标识，可用于设置锚点。

name：元素的名字，写在a标签中，也能设置锚点。

download：强制触发下载

唤起指定应用：

<!-- 唤起设备拨号 -->
<a href="tel:10010">电话联系</a>
<!-- 唤起设备发送邮件 -->
<a href="mailto:10010@qq.com">邮件联系</a>
<!-- 唤起设备发送短信 -->
<a href="sms:10086">短信联系</a>

8.列表：有序、无序、自定义

1.有序列表（Ordered list）

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

2.无序列表（Unordered list)

<ul>
    <li>ListItem1</li>
    <li>ListItem2</li>
</ul>

3.自定义列表（Definition list)

<dl>
    <dt>语术名称</dt>
    <dd>语术描述</dd>
</dl>

9.表格

标签	语义	常用属性
table	表格	width、height、border、cellspacing
cpation	表格标题
thead	表格头部	align、valign
tbody	表格主体	align、valign
tfoot	表格脚注	align、valign
tr	行	align、valign
td	单元格	width、height、align、valign、colspan、rowspan
th	表头单元格	width、height、align、valign、colspan、rowspan

10.表单：form

<form action="https://www.baidu.com/s" target="_blank" method="get">
    <input type="text" name="wd">
    <button>去百度搜索</button>
</form>

1.常用的表单控件：

文本输入框：<input type="text">

密码输入框：<input type="password">

单选框：<input type="radio">

复选框：<input type="checkbox">

隐藏域：<input type="hidden">

提交按钮：<input type="submit">

重置按钮：<input type="reset">

普通按钮：<input type="button">

文本域：<textarea></textarea>

下拉框：<select></select>

2.禁用表单控件：

给表单控件的标签设置 disabled 既可禁用表单控件。

3.label标签:

label 标签可与表单控件相关联，关联之后点击文字，与之对应的表单控件就会获取焦点。两种与 label 关联方式如下：

1. 让 label 标签的 for 属性的值等于表单控件的 id 。

2. 把表单控件套在 label 标签的里面。

4.fieldset与legend的使用：

fieldset 可以为表单控件分组、 legend 标签是分组的标题。

11.框架标签：iframe

标签名	功能和语义	属性
iframe	框架（在网页中嵌入其他文件）	name ：框架名字，可以与 target 属性配合。 width ：框架的宽。 height ：框架的高度。 frameborder ：是否显示边框，值： 0 或者 1 。

12.字符实体

	空格	<	<
>	>	&	&
¥	￥	&copy	©
&time;	×	&divide；	÷

4.文本标签-不常用的

cite	作品标题（书籍、歌曲、电影、电视节目、绘画、雕塑）
dfn	特殊术语，或专属名词
del 与 ins	删除的文本【与】插入的文本
sub 与 sup	下标文字【与】上标文字
code	一段代码
samp	从正常的上下文中，将某些内容提取出来，例如：标识设备输出
kbd	键盘文本，表示文本是通过键盘输入的，经常用在与计算机相关的手册中
abbr	缩写，最好配合上 title 属性
bdo	更改文本方向，要配合 dir 属性，可选值: ltr （默认值）、 rtl
var	标记变量，可以与 code 标签一起使用
small	附属细则，例如：包括版权、法律文本。—— 很少使用
b	摘要中的关键字、评论中的产品名称。—— 很少使用
i	本意是：人物的思想活动、所说的话等等。现在多用于：呈现字体图标（后面要讲的内容）。
u	与正常内容有反差文本，例如：错的单词、不合适的描述等。—— 很少使用
q	短引用 —— 很少使用
blockquote	长引用 —— 很少使用
address	地址信息