前端 Study HTML

Koite

已于 2022-03-10 18:07:19 修改

阅读量622

点赞数

文章标签：前端 safari html

于 2021-12-23 22:38:19 首次发布

本文链接：https://blog.youkuaiyun.com/Koite/article/details/122117975

版权

本文介绍了前端开发中HTML的基本概念，包括五大浏览器的渲染引擎差异、Web标准的构成、HTML语言的结构以及常见标签的使用。强调了遵循Web标准的重要性，以确保不同浏览器下页面的一致性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

五大浏览器

IE
火狐
谷歌
Safari
欧朋（Opera）

渲染引擎（浏览器内核）：浏览器中专门对代码进行解析渲染的部分

前段的代码是通过什么软件转换成用户眼中的界面的？

通过浏览器转化（解析和渲染）成用户看到的网页

每个浏览器渲染引擎不同，解析的效果会存在差异

保证不同浏览器打开效果一样，就要保证Web标准

web标准

HTML 结构页面元素和内容
CSS 表现网页元素的外观和位置等页面样式（颜色，大小等）
JavaScript 行为网页模型的定义和页面交互

HTML（是一门语言，中文译为超文本标记语言）

页面固定结构，如：

<html>

<head> <title> 页面的标题 </title> </head>

<body> 网页的主题内容

</body>

</html>

html：网页的整体
head：网页的头部
body：网页的身体
title：网页的标题

插件 open in browser ：alt+b直接用网页打开

注释

注释的快捷键：ctrl+/ （在VScode中）

标题标签：可分级，只有h1到h6。文字都默认加粗，从1到6逐渐变小。都独占一行。ctrl+d可以选择同样的字
段落标签：<p> </p>
换行标签：<br>
水平分割线：<hr>
文本格式化标签：

标签说明
b，strong 加粗
u，ins 下划线
i，em 倾斜
s，del 删除线

标签	说明
b，strong	加粗
u，ins	下划线
i，em	倾斜
s，del	删除线

如果要突出强调，就用英文单词

媒体标签：
1. 图片标签：img<img src="" alt="">(输入img即可)（src=“”标签属性）（src属性名）（引号里面的是属性值），一个标签可以写多个属性，属性之间用空格隔开，标签名与属性名也以空格隔开，属性之间没有顺序之分。
  - alt：替换文本，当src加载失败时，显示的文本。
  - title：提示文本，当鼠标悬停时，显示的文本，title属性不仅仅可以适用图片标签，还可以用于其他标签。
  - width和height：宽度和高度（数字），如果只设置了一个，另一个会自动等比缩放。（工作中只需要给出一个值）
```
<img src="" alt="" title="" width="" height="">
```
2. 路径：
  - 绝对路径（了解）：指目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径。网址也叫绝对路径。
  - 相对路径：从当前文件开始出发找目标文件的过程。
    - 同级目录：<img src="目标文件图片，jpg"> 或
      <img src="./目标文件图片，jpg">（./意为当前）
    - 下级目录：<img src="文件名/图片.jpg">
    - 上级目录：<img src="../目标文件图片，jpg">（../返回上一级，../../返回上两级）
3. 音频标签(双标签)：audio<audio src="music.mp3">
  
  属性名功能
  src 音频的路径
  controls 显示播放的控件
  autoplay 自动播放（部分浏览器不支持）
  loop 循环播放
  
  目前只支持三种格式：mp3，wav，ogg
  <audio src = "music.mp3" controls aytoplay loop> </audio>双标签
4. 视频标签：video<video src = "video.mp4"></video>
  
  属性功能
  src 视频的路径
  controls 显示播放的控件
  autoplay 自动播放（谷歌浏览器需配合muted实现静音播放）
  loop 循环播放
  目前只支持三种格式：MP4，webm，ogg
  
  imgurl是图片路径
```
<video src = "music.mp3" controls aytoplay loop>   </video>双标签
```
5. 链接标签：（快捷键a） <a href ="目标网页.html"></a>(双标签之间加超链接)
  
  开发初期，在不清楚跳转地址的时候，href的值写为 #（空链接）
  - href：跳转地址（如果填写文件，点击可直接下载文件）
  - target：目标网页的打开方式
  取值效果
  _self 默认值自，在当前窗口跳转（覆盖原网页）
  _blank 在新窗口中跳转（保留原网页）
```
<a href="网页地址" target="_blank">网页名字</a>

首页面名字：index.html
```
  锚点链接：点击链接，可以快速定位到页面的某个位置
  1.在链接文本中的herf属性中设置#+名字，如<a href ="#one">第一季</a>
  2.找到目标标签，添加一个id属性=刚才的名字，如：<h1 id="one">第一季介绍</h3>
6. 无序列表，有序列表，自定义列表
  - 无序列表：
  标签名说明
  ul 表示无序列表的整体，用于包裹li标签
  li 表示无序列表的每一项，用于包含每一行的内容
  1. ul标签中只允许包含li标签
  2. li标签中可以包含任意内容，标签
```
 <ul><li><strong>榴莲</strong></li>
        <li>火龙果</li>
        <li>香蕉</li>
</ul>
```
- 有序列表：无序列表的ul换成ol。
列表的每一项前默认显示序号标识

ol标签中只允许包含li标签

li标签中可以包含任意内容，标签
- 自定义列表
  
  标签名说明
  dl 表示自定义列表的整体
  dt 表示自定义列表的主题
  dd 表示自定义列表的针对主题的每一项内容
dd前会默认显示缩进效果

dl标签中只允许包含dt，dd标签

dt，dd标签可以包含任意内容
1. 7.7. 表格标签
  标签名说明
  table 表格整体，可用于包含多个tr
  tr 表格每行，可用于包裹td
  td 表格单元格，可用于包裹内容
  - 7. 表格标签
  - 表格相关属性：
  属性名属性值效果
  border 数字边框宽度
  width 数字
  表格宽度
  
  height 数字
  表格高度
  
  实际开发时针对于样式效果推荐用CSS设置

属性名	功能
src	音频的路径
controls	显示播放的控件
autoplay	自动播放（部分浏览器不支持）
loop	循环播放

属性	功能
src	视频的路径
controls	显示播放的控件
autoplay	自动播放（谷歌浏览器需配合muted实现静音播放）
loop	循环播放

取值	效果
_self	默认值自，在当前窗口跳转（覆盖原网页）
_blank	在新窗口中跳转（保留原网页）

标签名	说明
ul	表示无序列表的整体，用于包裹li标签
li	表示无序列表的每一项，用于包含每一行的内容

标签名	说明
dl	表示自定义列表的整体
dt	表示自定义列表的主题
dd	表示自定义列表的针对主题的每一项内容

标签名	说明
table	表格整体，可用于包含多个tr
tr	表格每行，可用于包裹td
td	表格单元格，可用于包裹内容

属性名	属性值	效果
border	数字	边框宽度
width	数字	表格宽度
height	数字	表格高度

cellpadding：规定表格内的字和边框之间的距离

cellspacing：规定单元格与单元格之间的距离

表格标题和表头单元格标签

标签名	名称	说明
caption	表格大标题	表示表格整体大标题，默认在表格整体顶部居中位置显示
th	表头单元格	表示一列小标题，通常用于表格第一行，默认内部文字加粗并居中显示

表格的结构标签（了解）

标签名	名称
thead	表格头部
tbody	表格主体
tfoot	表格底部

合并单元格：将水平或垂直多个单元格合并成一个单元格

通过左上原则，确定删除谁保留谁：

上下合并：只保留最上的，删除其他

左右合并：只保留最左的，删除其他

给保留的单元格设置属性：

属性名	属性值	说明
rowspan	合并单元格的个数	跨行合并，将多行的单元格垂直合并
colspan	合并单元格的个数	跨列合并，将多行的单元格水平合并

只有同一结构标签中的单元格才能合并，不能跨结构标签合并

8.表单标签：（登录页面，注册页面，搜索）

input系列（单标签）：type属性值

标签名	type属性值	说明
input	text	文本框，用于输入单行文本
input	password	密码框，用于输入密码
input	radio	单选框，用于多选一
input	checkbox	多选框，用于多选
input	file	文件选择，用于之后上传文件
input	submit	提交按钮，用于提交
input	reset	重置按钮，用于重置
input	button	普通按钮，默认无功能，之后配合js添加功能

补充：

type属性值	属性名	说明
text	placeholder	占位符，提示用户输入文本的内容
radio	name	分组，有相同属性值的单选框为一组，一组中同时只有一个被选中
radio	checked	默认被选中

maxlength：规定了输入的最大长度

表单域标签：form 表单标签的功能在form包裹中才能使用。<form action="">（引号之间填地址）

按钮之后可以添加一个 value：<input type="button" value="">引号中加按钮名字

input必须有name属性才能提交

<!-- 表单提交方式：采用button方式 
     如果采用submit，则不管用户输入什么都会提交
     form.submit();
-->
<form id="form" action="xxx.com">
    <button>
        提交
    </button>
</form>

<script>
    var form = document.querySelector('#form');
    var btn= document.querySelector('btn');
    btn.onclick = function(){
      if(所有表单都合法){
        form.submit();  
      };
    };
</script>

取消表单轮廓线： input{outline：none；}

button标签（双标签）

标签名	type属性值	说明
button	submit	提交按钮
button	reset	重置按钮
button	button	普通按钮，配合js

如：<button type="submit">中间填写按钮名字</button>

select下拉菜单标签：

select标签：下拉菜单的整体

option标签：下拉菜单的内容
```
<select>
    <option>
    北京
    </option>
    <option>
    浙江
    </option>
</select>
```
selected属性值:默认选中
- textarea文本域标签：在网页中提供可输入多行文本的表单控件
  
  标签名：textarea
  
  常见属性：右下角可调整大小，实际开发时针对于样式效果推荐使用CSS设置
  
  防止文本域拖拽：textarea{ resize：none；}
  
  cols：规定了文本域内可见宽度
  
  rows：规定了文本域内可见行数
  - lable标签：常用语绑定内容与表单标签的关系
    
    使用方法1：
    1. 使用label标签把内容（如：文本）包裹起来
    
    2.在表单标签上添加id属性
    
    3.在lable标签的for属性中设置对应的id属性
    
    使用方法2：
    1.直接用lable标签把内容和表单标签包裹起来
    
    2.需要把lable标签的for属性删除即可
    
    9.语义化标签：
    - 没有语义布局标签：div（一行只显示一个，独占一行），span（一行可以显示多个）
    - 有语义的布局标签：（做手机端网页用）
      
      标签名语义
      header 网页头部
      nav 网页导航
      footer 网页底部
      aside 网页侧边栏
      section 网页区块
      article 网页文章
      
      10.字符实体：网页不认识多个空格，只认识一个
      &nbsp；空格