HTML知识点总结

最新推荐文章于 2024-10-01 23:46:18 发布

芋泥芝士bao

最新推荐文章于 2024-10-01 23:46:18 发布

阅读量83

点赞数

分类专栏： js学习文章标签： html

本文链接：https://blog.csdn.net/kthvsxh/article/details/114786188

版权

js学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML知识点总结

文章目录

HTML简介
声明文档类型
标签
HTML主要常用标签
HTML属性
中文编码声明
超链接
HTML注释
文本格式设置
HTML head
HTML 表格
HTML 列表
HTML表单
路径写法

HTML简介

1.html是一种超文本标记语言，用来创建网页。
注意：不是编程语言。
2.利用标记标签来描述网页。
3.html中不支持使用空格、回车、制表符，它们会被解析成一个空白字符。

声明文档类型

1.！DOCTYPE 是一个文档类型标记(DOCTYPE是document type的缩写),用此来说明html是哪个版本。
2.DOCTYPE使用时不分大小写，无严格的规范。
3.<!DOCTYPE>没有结束标签。

中文网页编码声明

再很多浏览器中，直接输出中文一般会出现乱码的情况，所以此时需要在头部把编码设置成UTF-8，字符编码的设置实例：<meta charset="utf-8">。

HTML主要常用标签

<html>:用来定义整个html文档。
<title>:这个元素在头部中是必须的，用来设置文档的标题。一个文档中只能有一个<title>。浏览器会以特殊的方式来使用标题，并且通常把它放置在浏览器窗口的标题栏或状态栏上。
<head>:包含文档的元数据。
<body>:在该标签中的文档内容在网页中是可见的，用来定义文档的主体。
<h1>…<h6>:该标签用来定义标题的。实例：<h1>定义标题</h1>。
<p>:用此定义段落。
<img>:用此来定义图像。
<br>:表示换行，开始新的一行。
<script>：用来加载脚本文件。
<div>:分区,分块.

HTML属性

属性是html元素提供的附加信息。
属性一般描述开始标签。
属性值应该始终被包括在引号内。
属性值总是以名称/值对的形式出现，比如name=“cc”.

超链接

利用<a>元素来创建超链接。
<href>：用来指定a元素引用的资源的URL。
格式：<a href="url">链接</a>
以图片超链接为例：
1.当图片较多时，采用编码base64来提高加载速度，转换完成后，将文本牵引进html文档中，文本会被浏览器解读为图片。
2.图片途径标签：<src>。
3.<alt>:获取图片出现问题时显示的文字。
实例：

<a href="https://www.runoob.com/html/html-paragraphs.html">
   <img src="xxx.gif",alt="lalalla"></a>

HTML注释

1.格式：<!内容 >
2.在注释中的内容不会显示在浏览器界面中。
3.例子:

<!--单行注释-->
<!--
    多行注释
    多行注释
    多行注释
-->

文本格式设置

1.<b>:用来设置粗体。
2.<em>:用来着重文字。
3.<del>:用来删除文本.。
4.<small>:用来定义小号字。
5.<strong>:用来加重语气
6.<sub>:用来定义下标字
7.<sup>:用来定义上标字
8.<ins>:用来定义插入字
9.<i>:用来设置斜体字

HTML head

<head>: 定义文档的信息。
<title>:定义文档的标题。
<link>:定义一个文档和外部资源之间的关系。
例子：
```
 <link rel="stylesheet" type="text/css" href="style.css">
```
<meta>:用来定义文档中的元数据。
例子：(为搜索定义关键词）
```
  <meta  name="keyword" content="HTML,CSS,XML,JavaScript">
```
<style>:定义HTML文档的样式文件.

HTML表格

1.标签:

<table>:表格.
属性:border表示边缘宽度,width表示表格宽度.
<tr>:表示行.
<td>:普通单元格.
<th>:表头单元格(加粗显示)
<caption>:表格标题,居中显示.

2.例子:

<table>
    <tr>
      <th>姓名</th>
      <th>数学成绩</th>
      <th>语文成绩</th>
    </tr>
    <tr>
      <td>苏苏</td>
      <td>98</td>
      <td>96</td>
    </tr>
    <tr>
      <td>芽芽</td>
      <td>100</td>
      <td>100</td>
    </tr>
  </table>

效果:

姓名	数学成绩	语文成绩
苏苏	98	96
芽芽	100	100

HTML 列表

1.列表主要有有序列表和无序列表
2.无序列表说明:

<ul>:标记符号.
<li>:用来定义列表项序列.
type属性可以指定列表项目符号的样式,符号样式如下:
(1)dise:实心原点
(2)circlr:空心原点.
(3)square:实心方块.

-例子:

<ul type="dise">
  <li>1111</li>
  <li>222</li>
  <li>33</li>
</ul>

-效果:

1111
222
33

3.有序列表说明:

1. :标记符号.
type属性可以指定列表项目编号的样式,符号样式如下:
(1)1:阿拉伯数字
(2)a:小写英文字母
(3)A:大写英文字母
(4)i:小写罗马数字.
(5)l:大写罗马数字
-例子:

  <ol type="1">
  <li>数学</li>
  <li>语文</li>
  <li>英语</li>
  </ol>

效果:
1. 数学
2. 语文
3. 英语

HTML表单

表单元素使用:
1.文本区域:textarea
2.列表框:select
3. 文本输入框:input type="text"
4. 单选输入框:input type="radio"
5.复选输入框:input type="checkbox"
6.重置按钮;input type="reset" value="重置”
7. 提交按钮:input type="submit" value="提交"
8.密码域:input type="password" name="text" value=" "