HTML相关

最新推荐文章于 2022-12-05 11:45:04 发布
最新推荐文章于 2022-12-05 11:45:04 发布
阅读量253 收藏
点赞数
分类专栏： 前端 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CheatMyself/article/details/127408263
版权

day01

HTTP协议

HTTP协议（Hypertext Transfer Protocol）,超文本传输协议，是互联网数据传输的常见协议

一次HTTP事务由“HTTP请求”和“HTTP响应”构成

实时浏览网页

  1. 给VSCode安装Live Server插件。
  2. 在html中，按ctrl+shift+p键，选择“Open with Live Server”

HTML5骨架

<!DOCTYPE html>             		
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    hello world
</body>
</html>

第一行文档类型声明DTD

html标签对，lang属性表示网页的语言，zh表示中文，en表示英文

head标签对，表示网页的配置

​ mata表示网页的基础配置。属性charset=“UTF-8”,字符集=“UTF-8” name

字符集涵盖字符1个汉字字节数适用场景
UTF-8涵盖全球所有国家、民族的文字和大量图形字符3制作有非汉字文字的网页
gb2312(gbk)收录所有汉字字符（包括简体、繁体）和英语、少量韩文、日语和少量图形字符2制作只有汉语和英语的网页，由于一个汉字仅占2个字节，网页文件尺寸明显减少。

​ title网页的标题。

body标签对，表示用户可以看见的内容

网页关键词和描述
<meta name="Keywords" content="你好，HTML,"CSS","javaScript">
<meta name="Description" content="关于网页的描述">

标签

标题标签

h标签，共6级标题

段落标签

<p></p>标签

p标签不能嵌套h系列标签和其他p标签

div标签

<div></div>用来将相关内容组合到一起,以和其他应用分割，使文档结构更加清晰。

转义字符

转义字符意义
&\lt;小于号
&\gt;大于号
&\nbsp;空格
&\copy;版权符号

列表

标签语义
<ul></ul>无序列表
<ol></ol>有序列表
<dl></dl>定义列表
无序列表
  1. HTML规定，<ul>的子标签只能是<li>标签
  2. <li>标签是容器，内部可以放其他任何标签
<!DOCTYPE html>             
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>
            <h2>陕西省</h2>
            <ul>
                <li>西安市</li>
                <li>安康市</li>
            </ul>
        </li>

        <li>
            <h2>山西省</h2>
            <ul>
                <li>运城市</li>
                <li>太原市</li>
            </ul>
        </li>
    </ul>
</body>
</html>
  1. 无序列表有type属性
值描述
disc默认值，实心圆
circle空心圆
square实心方块
有序列表

  1. ol的子标签只能是li标签

  2. li标签可以放任何东西

  3. 有序列表的type属性

    值意义
    a小写英文字母编号
    A大写英文字母编号
    i小写罗马数字编号
    I大写罗马字母编号
    1数字编号

  4. start属性。制定了列表编号的起始值（为阿拉伯数字）

  5. reversed属性指定列表中的条目是否是倒叙排列

定义列表

dl definition list 定义列表

dt data term 数据项

dd data definition 数据定义

图片与超链接标签

图片标签

alt属性是对图像的文本描述

weight属性、height属性，如果只设置一个，表示按原始比例缩放图片

<img src="images/xxx.jpg" alt="xxx" width>

网页上支持的图片格式

格式说明
.bmpwindows画图软件默认保存的格式，位图
.gif支持动画（比如表情包）
.jpeg(.jpg)有损压缩图片，用于照片
.png便携式网络图像，用于logo、背景图形等，支持透明和半透明
.svg矢量图片
.webp最新的压缩算法非常优秀的图片格式
超级链接

title属性用于设置鼠标的悬停文本

target属性设置为blank,即可在新标签页中打开网页

<a hred=“2.html”>去第二个网页</a>

页面内锚点

点击跳转到id为wuxi的地址

<a href="lvyou.html#wuxi">跳转id为无锡地方</a>

跳转到页面顶部

<a href="#top">跳转到页面顶部</a>
邮件链接、电话连接

  1. 有mailto前缀是邮件链接，系统将自动打开Email相关软件

    <a href="mailto:xxx@qq.com">给xxx发邮件</a>

  2. 有**tel:**前缀的连接是电话连接，系统将自动打开拨号盘

音频和视频

  1. 在浏览器中插入音频需要使用<audio>标签，兼容到IE9 声明autoplay属性，音频会自动播放，声明loop属性，将循环播放音频

    <audio controls src="音频地址">抱歉，您的浏览器不支持audio标签，请升级浏览器</audio>

    controls显示播放控件 里面的文字是对不兼容audio标签的浏览器显示文字

  2. 在浏览器中插入视频需要使用<video>标签

大纲与语义化标签

大纲标签
区块标签说明
<section>文档的区域，语义比div大
<article>文档的核心文章内容，会被搜索引擎主要抓取
<aside>文档的非必要相关内容，比如广告等
<nav>导航条
<header>页头
<main>网页核心部分
<footer>页脚
<!DOCTYPE html>             
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <header>
        <nav>导航栏</nav>
    </header>
    <main>
        <aside>我是广告</aside>
        <article>
            <h1>文章的标题</h1>
            <section>部分1</section>
            <section>部分2</section>
            <section>部分3</section>
        </article>
    </main>
    <footer>页脚</footer>
</body>
</html>
语义化标签

1.<span>标签是文本中的“区块”标签，本身没特殊的显示效果，可以结合CSS来丰富样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p><span>北京</span>的区号是<span>010</span></p>
</body>
</html>
标签说明
<b>被加粗的文字，css已经代替了它的功能
<u>加下划线的文字，css已经代替了它的功能
<i>倾斜的文字，css已经代替了它的功能
强调语义
标签说明
<strong>代表特别重要文字
<em>代表强调文字，倾斜
<mark>代表一段需要被高亮的文字

<figure><figcaption>标签

<figure>代表以段独立的内容,与说明<figcaption>配合使用，是一个独立的引用单元，这部分转移到附录或者其他页面时不影响到主体

###表单

所有的HTML表单都是以一个<form>元素开始

action属性表示表单要提交到后台的网址 method属性表示表单提交的方式，有get或post

单行文本框

1.使用type属性值被设置为text的<input>元素可以创建单行文本框，它是一个单标签

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="" method="post">
        <p>
            请输入你的姓名：<input type="text">
        </p>
        <p>
            报考院校：<input type="text" value="清华大学" disabled>
        </p>
        <p>
            毕业院校：<input type="text" placeholder="请输入真是的毕业学校哦">
        </p>
        
    </form>
</body>
</html>
单选按钮

  1. 使用type属性值设置为radio的<input>元素可以创建单选按钮

  2. 互斥的单选按钮应该设置它们的name为相同值

  3. 单选按钮如果加上了checked属性，表示默认被选中

     <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="" method="post">
        <p>
            性别：
            <input type="radio" name="sex" value="男"> 男
            <input type="radio" name="sex" value="女"> 女
        </p>
    </form>
</body>
</html>
    label标签

    label标签用来将文字和单选按钮进行绑定

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="" method="post">
        <p>
            性别：
            <label>
            	<input type="radio" name="sex" value="男"> 男
            </label>
            <label>
                <input type="radio" name="sex" value="女"> 女
            <label>
        </p>
        
    </form>
</body>
</html>
复选框
  1. 使用type属性值设置为checkbox的<input>元素可以创建复选选按钮
密码框
 请输入密码：<input type="password">
下拉菜单
<select>
	<option value="alipay">支付宝</option>
	<option value="wx">微信</option>
	<option value="bank">网银</option>
</select>
多行文本框
  1. <textarea></textarea>表示多行文本框
  2. rows和cols属性，用于定义多行文本框的行数 和列数
三种按钮
  1. 表单中常见的三种按钮，它们都是input标签，type值不同
type属性值按钮属性
button普通按钮，可以简写为<button></button>
submin提交按钮
reset重置按钮

提交按钮将表单的内容提交到后台

更多input种类

type属性值控件
color颜色选择控件
date、time日期、时间选择控件
email电子邮件输入控件
file文字选择控件
number数字输入控件
range拖拽条
search搜索框
url网址输入控件

必填 加入required属性 number 有min与max属性

<datalist>控件

<datalist>控件可以为输入框提供一些备选项，当用户输入的内容与备选文字相同时，将会智能感应list属性值要跟datalist的id名一致

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="" method="post">
        <input type="text" list="province-list">
        <datalist id="province-list">
            <option value="山东"></option>
            <option value="山西"></option>
            <option value="广东"></option>
            <option value="广西"></option>
            <option value="河南"></option>
            <option value="河北"></option>
            <option value="湖南"></option>
            <option value="湖北 "></option>
        </datalist>
    </form>
</body>
</html>

表格

表格的基本使用 tr行 td列 th列的标题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table,tr,td{
            border-collapse: collapse;
        }
    </style>
</head>
<body>
    <table border="1" width="400">
        <caption>我是表格的标题</caption>
        <tr>
            <th>第一季度</th>
            <th>第二季度</th>
            <th>第三季度</th>
            <th>第四季度</th>
        </tr>
        <tr>
            <td>A</td>
            <td>B</td>
            <td>C</td>
            <td>D</td>
        </tr>
        <tr>
            <td>E</td>
            <td>F</td>
            <td>G</td>
            <td>H</td>
        </tr>
        <tr>
            <td>I</td>
            <td>G</td>
            <td>K</td>
            <td>L</td>
        </tr>
    </table>
</body>
</html>

colspan属性用来设置td或者th的列跨度

rowspan属性用来设置行跨度

  <table border="1" width="400">

        <caption>我是表格的标题</caption>
        <tr> 
            <th>第一季度</th>
            <th>第二季度</th>
            <th>第三季度</th>
            <th>第四季度</th>
        </tr>
        <tr>
            <td>A</td>
            <td>B</td>
            <td>C</td>
            <td>D</td>
        </tr>
        <tr>
            <td>E</td>
            <td  rowspan="2">F</td>
            <td rowspan="3" colspan="2">G</td>
        </tr>
        <tr>
            <td>h</td>
        </tr>
        <tr>
            <td>I</td>
            <td>j</td>
        </tr>
    </table>

请添加图片描述

thead表头 tfoot表尾

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table,tr,td{
            border-collapse: collapse;
        }
    </style>
</head>
<body>
    <table border="1" width="400">
        <caption>我是表格的标题</caption>
        <thead>
            <tr>
                <th> </th>
                <th colspan="2">第一季度</th>
                <th colspan="2">第二季度</th>
                <th colspan="2">第三季度</th>
                <th colspan="2">第四季度</th>
            </tr>
            <tr>
                <th></th>
                <td>国内</td>
                <td>国外</td>
                <td>国内</td>
                <td>国外</td>
                <td>国内</td>
                <td>国外</td>
                <td>国内</td>
                <td>国外</td>
            </tr>
        </thead>
        <tr>
            <th>手机</th>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
        </tr>
        <tr>
            <th>电脑</th>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
        </tr>
        <tr>
            <th>笔记本</th>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
        </tr>
        <tfoot>
            <th>汇总</th>
            <td>369</td>
            <td>369</td>
            <td>369</td>
            <td>369</td>
            <td>369</td>
            <td>369</td>
            <td>369</td>
            <td>369</td>
        </tfoot>
    </table>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tMGjLkyQ-1666162710840)(HTML.assets/1645969471258.png)]

        <td>123</td>
    </tr>
    <tr>
        <th>笔记本</th>
        <td>123</td>
        <td>123</td>
        <td>123</td>
        <td>123</td>
        <td>123</td>
        <td>123</td>
        <td>123</td>
        <td>123</td>
    </tr>
    <tfoot>
        <th>汇总</th>
        <td>369</td>
        <td>369</td>
        <td>369</td>
        <td>369</td>
        <td>369</td>
        <td>369</td>
        <td>369</td>
        <td>369</td>
    </tfoot>
</table>
``` ![请添加图片描述](https://img-blog.csdnimg.cn/b282a1862cef4b30987da3feb9d99f17.png)
ZZ58
关注
专栏目录
html相关知识学习.zip
01-01
html相关知识学习html相关知识学习html相关知识学习 html相关知识学习html相关知识学习html相关知识学习 html相关知识学习html相关知识学习html相关知识学习 html相关知识学习html相关知识学习html相关知识学习 html...
HTML中html元素的lang是什么
qq_36976201的博客
03-07 1644
属性lang是英语language的缩写，意思是语言，”en”代表英语，”zh-CN”代表中文 它可以帮助语音合成工具确定其要使用的发音 帮助翻译工具要使用的翻译规则 标准最新版本： zh-Hans-CN 去表示：中国大陆的简体中文=中华人民共和国的简体中文==Chinese Mandarin(Simplified)==PRC Chinese Mainland in simplified。当然：如果考虑到其他的兼容性，其实也还是可以暂时继续使用：zh-CN的写法的。 ...
HTML入门基础知识（二）
qq_46678602的博客
08-06 486
HTML入门基础知识（二）html标签入门基础知识开发工具生成的骨架标签< !DOCTYPE>标签lang 语言种类字符集 html标签入门基础知识 开发工具生成的骨架标签 < !DOCTYPE>标签 < !DOCTYPE>文档类型声明，主要是告诉浏览器使用哪种html版本显示网页。 注意： < !DOCTYPE>声明位于文档的最前位置，处于< html>标签之前。 < !DOCTYPE>不是html标签，只是一个文档声明标签。 lan
html标签中lang属性及xml:lang属性的作用
weixin_30415113的博客
05-22 607
lang属性：HTML语言声明属性，用来定义当前文档显示的语言。 如：lang="en"表示定义语言为英文；lang="zh-CN"表示定义语言为中文。其实对于文档显示来说怎样写都无所谓，定义成en的文档也可以显示中文，定义成zh-CN的文档也可以显示英文。但还是应该遵循标准，毕竟这个属性对浏览器和搜索引擎还是有作用的。 其实，在新的XHTML文档中，lang属性已经被xml:lang属性代替...
HTML中html元素的lang属性的说明
热门推荐
mirro81的博客
07-16 5万+
HTML中html元素的lang属性的说明我在刚开始学习HTML的时候，关于基本的HTML格式中有一点不明白的地方，基本格式如下：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body></body> </html>究竟html标签中的lang属性是干嘛的
记录 html 相关的学习笔记.zip
01-02
html css js 知识学习资料 代码 源码 供相关人员学习参考 html css js 知识学习资料 代码 源码 供相关人员学习参考 html css js 知识学习资料 代码 源码 供相关人员学习参考 html css js 知识学习资料 代码 源码 供...
HTML相关技术基础知识
02-28
HTML相关技术基础知识，表单标签，事件等详解。
html5相关文档
01-07
html相关介绍，js相关接口分析使用，浏览器兼容技术
html标签的lang属性
MoeCodeFree的博客
09-01 3388
html标签的lang属性 前言 做 web 无障碍相关的研究时，遇到的第一件事就是要给 <html> 设置正确的 lang 属性，这么简单的一件事，想也不用就写好了：<html lang="zh-CN">，或者直接简写成 <html lang="zh">，Bingo，可以去做其它事了。 但仔细想一想，好像有些问题 zh 是什么鬼？拼音？明明是国际标准怎么会用中文拼音？ CN 为什么要大写？zh-CN表示中国中文，zh-SG表示新加坡中文，但都是用的简体中文，貌似没什么
四年开发经验教你使用html的lang属性使用
HWSss的博客
04-15 932
<!DOCTYPE html> <html lang="en"> </html> lang属性的主要的作用是用来表示网页字体是中文还是英文还是其他语言 lang=“en” 表示这个是该网页的字体是英文字体 在中文网页打开会自动弹出显示 是否将英文翻译成中文字体 lang = “ch-zn” 表示这个是中文字体 还有其他的字体 建议百度 ...
Lang定义网页语言属性
2202_75549187的博客
12-05 896
Lang定义网页语言属性
HTML元素的lang属性的说明及详解
刺心的博客
09-16 1万+
我在刚开始学习HTML的时候，关于基本的HTML格式中有一点不明白的地方，基本格式如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body><...
html的lang属性
输微
06-22 1688
网页头部的声明应该是用 lang=“zh” 还是 lang=“zh-cn”？ - 维尼和青蛙的回答 - 知乎 https://www.zhihu.com/question/20797118/answer/63480740
HTML：lang
weixin_43731793的博客
06-13 668
1、HTML 的 lang 属性可用于网页或部分网页的语言。这对搜索引擎和浏览器是有帮助的。 根据 W3C 推荐标准，您应该通过 标签中的 lang 属性对每张页面中的主要语言进行声明，比如： <html lang="en"> </html> <html lang="zh-CN"> </html> ...
HTML5规范中的lang对应代码
艾斯博弈
10-22 9577
根据 HTML5 规范： 强烈建议为 html 根元素指定 lang 属性，从而为文档设置正确的语言。这将有助于语音合成工具确定其所应该采用的发音，有助于翻译工具确定其翻译时所应遵守的规则等等。 如<html lang="zh-CN"> </html> 下面整理的是:按照字母顺序排列的语言(非语言代码)与核心使用lang属性来识别语言的元素包含在lang属性中。
HTML标签lang lang - 指定语言种类
qq_44884287的博客
04-08 3501
HTML标签lang lang - 指定语言种类
html标签 lang的值
pans0的博客
08-01 1735
每次使用VS Code的时候，用！自动补充整个HTML页面的框架的时候，在html标签上有一个lang属性。 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content=&quot
HTML5相关面试题
最新发布
07-13
相关问题： 1. 在实际项目中，你是如何利用HTML5的新特性和API提高用户体验的？ 2. 当遇到HTML5浏览器兼容性问题时，你会采取哪些措施？ 3. 你能举个例子说明如何通过HTML5更好地实现页面的交互吗？ 以上内容仅供...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值