HTML的知识点总结

最新推荐文章于 2022-02-07 15:21:01 发布

zjy13152842801

最新推荐文章于 2022-02-07 15:21:01 发布

阅读量212

点赞数

本文链接：https://blog.csdn.net/weixin_44369852/article/details/112652050

版权

HTML的知识点总结

【HTML是什么】
html是超文本标记语言，一种标识性的语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一。

  url: http://127.0.0.1:32767/start.html
  统一资源定位符
        ip地址:端口号 就相当于  域名 (eg:www.baidu.com)   域名=ip地址+端口号
        ip 39.156.66.18:80(端口号一般默认：80)  ip地址定位到哪一台电脑上，端口号定位到哪一个应用程序上。

        访问百度
        www.baidu.com    
        http://39.156.66.18:80/index.html
        (后面的index.html是默认访问的)(ip地址是跟电脑唯一对应的 )
        http://39.156.66.18:80/index.php
        ip地址定位到某一台服务器上(电脑)
        端口号定位到指定服务器上的应用程序内(软件)
        index.html是找应用程序内的这个文件

绝对路径与相对路径：

举两个最为常见的绝对路径的例子：

（1）.完整的URI地址：

http://www.softdewhy.com/antzone.jpg。

DNS服务器能够将网址解析到服务器硬盘下antzone.jpg图片文件。

（2）.完整盘符：

D:\mayi\web\images\antzone.jpg。

图片的存储位置得到了完整描述，非常明确。

相对路径：
./ …/
(…/)

【HTML标签】(不区分大小写)(html根标签里有head元素和body元素)

开始标签后面language是属性名 "en"是属性值结束标签是单标签设置文档的文字编码格式是选项卡名字里的内容是展示在视图区的

是最常用的标签

[块级元素]：div p 标签独占一行 p标签自带margin 也就是与其他标签有一定距离
[行内元素]：与其他元素共享一行空间，一般被嵌套在块级元素中，作为段落一部分出现。strong span style
[空元素]：meta 通常用于在文档中插入部分内容
[html元素属性]：属性写在开始标签内，属性于属性之间通过空格隔开，属性与属性值之间使用=隔开

块级标签和行内标签的区别：
1.块级独占一行，行内可以与其他元素共享一行
2.块级元素可以包含块级元素和行内元素，行内元素只能包含文本或者其它行内元素。
3.块级元素可以设置宽高，行内元素不能设置宽高
html特点：
从上到下依次解析，容错性（不报错），大小写不敏感

（head）meta设置字符编码，html5中还有个meta设置手机属性
title设置标签页
（body）中写内容

元素：
块级元素：如div（独占一行，不与其他元素共享空间，p标签自带margin）
行内元素：如span（可以共享空间，不能直接设置上下的内外边距）
标签不能交叉嵌套

属性：
属性名和属性值用=链接，多对属性间空格隔开
公有属性（id<唯一标识>,class,style<行内样式>,title），私有属性
基本属性（""或’'中写入）布尔值属性（true false）

语法：
1.无论多少空格和换行，都只算一个
2.字符实体
使用&开头，用；结尾，中间写名称 &lt；zzf&gt；（结果就为）
3.注释
提升可读性，（程序员最讨厌写注释和不写注释的人）

标签：
body：边距为8px
p：段落标签,边距为16px
pre:保存用户输入格式
img：图片（特殊行内元素，可以设置长宽，display:inline-block）
alt：替换内容 src：引入图片地址

./（同级别文件）   ../（上一级文件）
br（换行）  hr（设置水平线）  sub（下标） sup（上表）   a：超链接  href（设置链接地址  #id 为目标的id）
target（设置页面打开方式）
      ：_blank(打开新页面） _self（在本页面打开） _parent(在父框架打开） _top(在顶框架打开）

h1~h6（字符大小）

table（表格）：
caption（设置表格标题） thead（头部） tbody（体部） tfoot（脚部） tr：一行 th/td:一个单元格
rowspan(跨行合并） colspan（跨列合并） colgroup:写在所有tr之上 col：标识符

form（表单）：
action（表单提交地址） target（_self _blank） method（设置表单提交方式 get：将数据拼接在浏览器地址栏，安全性低
，只能提交少量数据 post：将数据分装到请求体中，安全性高，多量数据）
enctype（设置表单提交的数据类型）username
子组件：
input：
私有属性：type：text:单行文本框 password: 密码框 submit:提交按钮 reset: 重置按钮 image:图片按钮 radio:单选框 checkbox:多选框 button:普通按钮 hidden:隐藏域 file:文件上传按钮
value:1.写在按钮上，代表修改按钮名称 2.写在输入框上，代表输入框的默认值
name:设置前后台交互数据的key值
src:type=image(alt:) checked：布尔值，默认选中效果，针对单选框和多选框 size:改变长度 maxlength：文本框的最大输入字符长度 readonly：只读 disabled:布尔值属性光标无法定位

label：关联文字和组件 fieldset: legend:设置区域标题
button：按钮 type:submit reset button如果button写在form标签内，type默认为submit如果button写在form标签外，type默认为button
select:下拉框私有属性：size:设置每次展示的项数 multiple:布尔属性是否可以多选 disabled： name
option:选项 disabled selected:布尔属性，默认选中项
optgroup:分组 option label:名字
textarea：多行文本框
wrap:

off关闭自动换行

hard:自动硬回车换行传到服务器中soft:自动软回车换行不传到服务器中progess :进度条

meter:规定范围内的数量值

datelist:提示用户输入

type: date 日期

time时间

number数字step 步长max最大值

mouth月

url地址

color调用电脑默认识色器

autofocus:聚焦

placeholder:提示

requir：必填项

pattern：属性为正表达式检验格式是否正确

列表标签：
ul：无序列表 li:子标签
ol: 有序列表私有属性：start:number reversed:布尔属性子标签：li 默认序号从1开始
dl: 标题列表 dt: 标题标签 dd:列表项

超链接标签
超链接标签，用于在效果中定义一个可以点击跳转的链接
href：超链接跳转的路径 (必有属性)
target:设置页面的打开方式
1._black:打开新页面
2._self：在当前页面打开
3._top:在顶级框架中打开
4._partent:在父框架中打开

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

注意：
①a标签内容体，不仅仅是文字，也可以是其他内容，例如图片
②a标签的href属性，不仅仅可以链接到html上，也可以链接到其他文件上，例如图片

<a herf="demo html">

<img src="../img/c_1.jpg" />

</a>

表格标签

表格标签，用于在效果中定义一个表格
1.border：设置表格的边框粗细
2.width：设置表格的宽度

<tr></tr>表格的行标签，用于在效果中定义一个表格行
1
<td></td>表格的单元格标签，用于在效果中定义一个表格行中的单元格
1
<table>
<tr>
<td>姓名</td>
<td>数学</td>
</tr>
<tr>
<td>A</td>
<td>100</td>
</tr>
</table>

快捷方式：tr4>td4 （快速生成一个四行四列的表格）

<th></th>表格的表头单元格标签，用于在效果中定义一个表格行中的表头单元格
<th>和<td>唯一区别：<th>内容 居中加粗

单元格合并
colspan：跨列合并单元格
rowspan：跨行合并单元格
确定合并哪几个单元格，确定是跨列合并还是跨行合并在第一个出现的单元格上书写合并单元格属性合并几个单元格，属性值就书写几被合并的单元格必须删掉
caption:设置表格标题
thead:设置表格头部
tbody:设置表格的体部
tfoot:设置表格的底部

一个HTML文件是有自己固定的结构的
标准的超文本标记语言文件都具有一个基本的整体结构，标记一般都是成对出现（部分标记除外例如：<br/>），即超文本标记语言文件的开头与结尾标志和超文本标记语言的头部与实体两大部分。有三个双标记符用于页面整体结构的确认。

<html>

<head>...</head>

<body>...</body>

</html>

<html></html>称为根标签，所有的网页标签都在<html></html>中。这2个标记符分别表示头部信息的开始和结尾。头部中包含的标记是页面的标题、序言、说明等内容，它本身不作为内容来显示，但影响网页显示的效果。
<head> 标签用于定义文档的头部，它是所有头部元素的容器。头部元素有<title>、<script>、 <style>、 <meta>等标签。

<head>  定义了文档的信息
<title>定义了文档的标题
<base>定义了页面链接标签的默认链接地址
<link>定义了一个文档和外部资源之间的关系
<meta>定义了HTML文档中的元数据
<script>定义了客户端的脚本文件
<style>定义了HTML文档的样式文件

在<body>和</body>标签之间的内容是网页的主要内容，网页中显示的实际内容均包含在这2个正文标记符之间。正文标记符又称为实体标记。如<h1>、<p>、<a>、<img>等网页内容标签，在这里的标签中的内容会在浏览器中显示出来。
代码注释不仅方便程序员自己回忆起以前代码的用途，还可以帮助其他程序员很快的读懂你的程序的功能，方便多人合作开发网页代码。被注释掉的内容不会被浏览器所解析，但会在代码中存在。
语法：

<!--注释文字 -->

结构划分

<html>                // Html 开始标示
<head>                // Html 头标示
<title>Hello</title>  // 设置网页标题
</head>               // 头结束标示
<body>                // 主体开始标示
<p>Hello world!!!</p> // 放置Hello word(文本)
</body>               // 主体结束标示
</html>               // Html结束标示