HTML基础（一）-程序员宅基地

技术标签： html5  前端  HTML  html  

文章目录

1. 开发工具

工欲善其事，必先利其器

1.1. VsCode安装

VsCode安装

1.2. VsCode推荐插件(HTML与CSS)

2. 初始Web

  • 网页主要是由文字、图像和超链接等元素构成，当然除了这些元素，网页中还可以包括音频、视频以及Flash等。

  • 浏览器是网页显示、运行的平台。

  • 浏览器内核(排版引擎、解释引擎、渲染引擎)

负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。

2.1. 常用浏览器以及内核

浏览器 内核 备注
IE Trident IE、猎豹安全、360极速浏览器、百度浏览器
Firefox Gecko 可惜这几年已经没落了，打开速度慢、升级频繁、猪一样的队友flash、神一样的对手chrome。
Safari webkit 现在很多人错误地把 webkit 叫做 chrome内核（即使 chrome内核已经是 blink 了）。苹果感觉像被别人抢了媳妇，都哭晕在厕所里面了。
Chrome Chromium/Blink 在 Chromium 项目中研发 Blink 渲染引擎（即浏览器核心），内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支。大部分国产浏览器最新版都采用Blink内核。二次开发
Opera blink 现在跟随chrome用blink内核。

2.2. Web标准

2.2.1. 构成

  • 结构标准：用于对网页元素进行整理和分类(HTML)
  • 表现标准：用于设置网页元素的版式、颜色、大小等外观属性(CSS)
  • 行为标准：用于对网页模型的定义及交互的编写(JavaScript)

2.2.2. 优点

  • 易于维护：只需更改CSS文件，就可以改变整站的样式
  • 页面响应快：HTML文档体积变小，响应时间短
  • 可访问性：语义化的HTML（结构和表现相分离的 HTML）编写的网页文件，更容易被屏幕阅读器识别
  • 设备兼容性：不同的样式表可以让网页在不同的设备上呈现不同的样式
  • 搜索引擎：语义化的HTML能更容易被搜索引擎解析，提升排名

3. 开始HTML

HTML(Hyper Text Markup Language)：超文本标记语言

两层含义：

  • 因为它可以加入图片、声音、动画、多媒体等内容==（超越文本限制 ）==。
  • 不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接==（超级链接文本）==。

3.1. HTML基本骨架

基本骨架：

<!-- 页面中最大的标签 根标签 -->
<html>
    <!-- 头部标签 -->
    <head>     
        <!-- 标题标签 -->
        <title></title> 
    </head>
    <!-- 文档的主体 -->
    <body>
    </body>
</html>

团队约定大小写：HTML标签名、类名、标签属性和大部分属性值统一用小写。

HTML元素标签分类：

<!-- 常规元素(双标签) -->
<标签名> 内容 </标签名>   比如<body>我是文字</body>

<!-- 空元素(单标签) -->
<标签名 />  比如 <br />或<br>
  • HTML 标签是由尖括号包围的关键词，例如 <html>
  • HTML 标签通常是成对出现的，例如 <html>和</html> ，我们称为双标签。标签对中的第一个标签是开始标签，第二个标签是结束标签。
  • 有些特殊的标签必须是单个标签（极少情况），例如<br/>，我们称为单标签。

HTML标签关系：

  • 嵌套关系：父子级包含关系
  • 并列关系：兄弟级并列关系
  • 如果两个标签之间的关系是嵌套关系，子元素最好缩进一个tab键的身位（一个tab是4个空格）。如果是并列关系，最好上下对齐。

3.2. 文档类型

文档类型：用来说明你用的XHTML或者HTML是什么版本。<!DOCTYPE html>告诉浏览器按照 HTML5 标准解析页面。

  • <!DOCTYPE> 声明位于文档中的最前面的位置，处于<html>标签之前。
  • <!DOCTYPE> 不是一个 HTML 标签，它就是文档类型声明标签。

3.3. 页面语言

lang指定该 HTML 标签内容所用的语言

<html lang="en">  
<!-- en 定义语言为英语 zh-CN定义语言为中文 -->

lang的作用：

  • 根据根据lang属性来设定不同语言的css样式，或者字体
  • 告诉搜索引擎做精确的识别
  • 让语法检查程序做语言识别
  • 帮助翻译工具做识别
  • 帮助网页阅读程序做识别

3.4. 字符集以及常见meta用法

字符集：(Character set)是多个字符的集合,计算机要准确的处理各种字符集文字，需要进行字符编码，以便计算机能够识别和存储各种文字。

  • UTF-8 是目前最常用的字符集编码方式，也被称为万国码，基本包含了全世界所有国家需要用到的字符
  • 让 HTML 文件是以 UTF-8 编码保存的， 浏览器根据编码去解码对应的 HTML 内容。
  • charset 常用的值有：GB2312 、BIG5 、GBK 和 UTF-8
<meta charset="UTF-8" />

常见meta用法

3.5. HTML标签

3.5.1. 标签语义

  • 方便代码的阅读和维护，样式丢失的时候能让页面呈现清晰的结构。
  • 有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。
  • 方便其他设备解析，如盲人阅读器根据语义渲染网页
  • 根据标签的语义，再合适的地方给一个最合理的标签，可以让页面结构更清晰
<!-- 标签：规定页面上所有链接的默认 URL 和设置整体链接的打开状态 -->
<head>
    <base href="http://www.baidu.com" target="_blank">
    <base target="_self">
</head>
<body>
    <a href="">测试</a> 跳转到 百度
</body>

3.5.2. 常用标签

3.5.2.1. 排版标签

主要和css搭配使用，显示网页结构的标签，是网页布局最常用的标签

  • 标题标签 h(h1~h6)
  • 段落标签 p,可以把 HTML 文档分割为若干段落
  • 水平线标签 hr
  • 换行标签 br
  • div和span标签 是没有语义的,是我们网页布局最主要的2个盒子。
  • b和strong 文字以粗体显示
  • i和em 文字以斜体显示
  • s和del 文字以加删除线显示
  • u和ins 文字以加下划线显示
3.5.2.1.1. 标题标签 h1-h6
<h1>标题标签</h1>
<h1>标题一共六级选,</h1>
<h2>文字加粗一行显。</h2>
<h3>由大到小依次减，</h3>
<h4>从重到轻随之变。</h4>
<h5>语法规范书写后，</h5>
<h6>具体效果刷新见。</h6>
3.5.2.1.2. 段落标签

标签语义：把 HTML 文档分割为若干段落。

<p>我是一个段落标签</p>

p 指paragraph，意为段落。把文字有条理的显示出来就需要将文字分段显示。在 html 中，<p> 标签用于定义段落，将整个网页分成若干个段落。

3.5.2.1.3. 换行标签

标签语义：强制换行

<br/>

<br/> 是 break 缩写，意为打断、换行。

3.5.2.1.4. 文本格式化标签

标签语义：突出重要性，比普通文字重要。

语义 标签 说明
加粗 <strong></strong>或<b></b> 更推荐<strong>，语义更强烈
斜体 <em></em>或<i></i> 更推荐使用<em>，语义更强烈
删除线 <del></del>或<s><s/> 更推荐使用<del>，语义更强烈
下划线 <ins></ins>或<u></u> 更推荐使用<ins>，语义更强烈

在网页中，有时候需要为文字设置粗体、斜体或下划线等效果，需要使用 HTML 中的文本格式化标签，使文字以特殊方式显示。

3.5.2.1.5. 盒子标签

<div> 和 <span> 是没有语义的，它们是一个盒子，用来装内容的。

<div>这是头部</div>
<span>今日价格</span>
  • div 标签：用来布局，但是现在一行只能放一个 div，大盒子。
  • span 标签：用来布局，一行可以多个 span，小盒子。
3.5.2.2. 图像标签

在 HTML 标签中，<img /> 标签用于定义 HTML 标签页面中的图像。

<img src="图像url" />

src属性：

src 是标签的 必须属性，用于指定图像文件的路径和文件名

其他属性：

属性 属性值 说明
src 图片路径 必须属性
alt 文本 替换文本，当图片不显示时显示文字
title 文本 提示文本，鼠标放到图像上显示文字
width 像素 图像宽度
height 像素 图像高度
border 像素 图像边框粗细
3.5.2.3. 路径
  • 相对路径
  • 绝对路径
3.5.2.3.1. 相对路径

相对路径：以引用文件位置为参考基础，而建立出来的目录路径。是相对于 HTML 页面的位置。

分类 符号 说明
同级路径 同一级
下一级路径 / 位于 HTML 文件上一级
上一级路径 ../ 位于 HTML 文件下一级
3.5.2.3.2. 绝对路径

绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径或者完整的网络地址。

3.5.2.4. 超链接标签
  1. 外部链接
  2. 内部链接：网站内部页面之间的相互链接。
  3. 空链接: #
  4. 下载链接：地址链接的是文件.exe、压缩包.zip 等。
  5. 网页元素链接：在网页中的各种网页元素。如文本、图像、表格、音频、视频等。
  6. 锚点链接：点击链接，可以快速定位到页面中的某个位置。
    • 在链接文本的href属性中，设置属性为 #名字的形式
    • 找到目标位置标签，里面添加一个 id 属性 = 名字

在 HTML 标签中，<a/> 标签用于从一个页面链接到另一个页面。

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
<!-- target="_self"  默认窗口弹出方式 -->
<!-- target="_blank" 新窗口弹出 -->

阻止 a 链接跳转，课可给 href 属性设置 javascript:void(0); 或者 javascript:;

锚点链接：

<!-- 1. 使用相应的id名标注跳转目标的位置。 (找目标) -->
  <h3 id="two">第2集</h3> 

<!-- 2. 使用<a href="#id名">链接文本</a>创建链接文本（被点击的）  -->
  <a href="#two">

src 和 href 的区别

前端学习中src、href和url分别是什么以及他们的区别

3.5.2.5. 注释标签
  • 注释: VSCode 中快捷键Ctrl + /

团队约定：注释内容前后各一个空格字符，注释位于要注释代码的上面，单独占一行

3.5.2.6. 特殊字符

HTML 字符实体

在这里插入图片描述

3.5.2.7. 表格标签

现在还是较为常用的一种标签，但不是用来布局，常见显示、展示表格式数据。因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候表格运用是否熟练就显得很重要，一个清爽简约的表格能够把繁杂的数据表现得很有条理。

  • table 用来定义表格的标签
  • caption 通常这个标题会被居中且显示于表格之上。caption 标签必须紧随 table 标签之后。这个标签只存在 表格里面才有意义
  • tr 用来定义表格中的行，必须嵌套在<table></table> 标签中
  • td 用来定义表格中的单元格，必须嵌套在<tr></tr> 标签中
  • th 用来定义表格中的表头，表头单元格里面的内容加粗居中显示

创建表格：

<table>
    <caption>我是表格标题</caption>
    <tr>
        <th>表头</th>
    </tr>
    <tr>
        <td>单元格内的文字</td>
    ...
    </tr>
  ...
</table>

表格属性：

只作了解，后期通过 CSS 来设置。 这些属性都要写到 <table></table> 标签中

属性名 属性值 描述
align left、center、right 表格元素对齐方式
border 1或"" 规定是否有边框，默认为""，表示没有边框
cellpadding 像素值 规定单元边沿与其内容之间空白，默认1px
cellspacing 像素值 规定单元格之间得空白，默认为2px
width 像素值或百分比 规定表格宽度
hight 像素值 规定表格高度

合并单元格：

合并的顺序我们按照 先上 后下 先左 后右 的顺序 ,合并完之后需要删除多余的单元格

  • 跨行合并：rowspan="合并单元格的个数"
  • 跨列合并：colspan="合并单元格的个数"
<td colspan = "2"></td>

表格划分结构：

对于比较复杂的表格，表格的结构也就相对的复杂了，所以又将表格分割成三个部分：题头、正文和脚注。而这三部分分别用:thead,tbody,tfoot来标注， 这样更好的分清表格结构。

  1. <thead></thead>：用于定义表格的头部。用来放标题之类的东西。<thead> 内部必须拥有 <tr> 标签！
  2. <tbody></tbody>：用于定义表格的主体。放数据本体 。
  3. <tfoot></tfoot>：放表格的脚注之类。
  4. 以上标签都是放到 <table></table> 标签中。
3.5.2.8. 列表标签
  • 无序列表：<ul>
  • 有序列表：<ol>
  • 自定义列表：<dl>
3.5.2.8.1. 无序列表

<ul> 标签标识 HTML 页面项目中的无序列表，一般以项目符号呈现列表项。

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    ......
</ul>
  • 无序列表带有自己的属性，可用 CSS 修改样式属性。
  • <ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
  • <li></li>之间相当于一个容器，可以容纳所有元素。
3.5.2.8.2. 有序列表

使用 <ol> 标签来定义有序列表，<li> 来定义列表项。

<ol type="A"> 
    <li>列表项1</li>
    <li>列表二</li>
    <li>列表三</li>
</ol>
  • <ol>标签中的type属性值为排序的序列号，不添加type属性时，有序列表默认从数字1开始排序。
  • 常用的type属性值分别为是1，a，A，i，I
  • <ol reversed="reversed">中的reversed属性能够让有序列表中的序列倒序排列。
  • <ol start="3">中的start属性值为3，有序列表中的第一个序列号将从3开始排列。
3.5.2.8.3. 自定义列表

<dl> 定义描述列表，与 <dt> 和 <dd> 标签配合使用。

<dl>
    <dt>名词1</dt>
    <dd>名词1解释1</dd>
    <dd>名词1解释2</dd>
    ...
    <dt>名词2</dt>
    <dd>名词2解释1</dd>
    <dd>名词2解释2</dd>
    ...
</dl>
3.5.2.9. 表单标签

在HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成。表单目的是为了收集用户信息。

  • 表单控件：包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。
  • 提示信息：一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。
3.5.2.9.1. 表单域

表单域：它相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。

<form action="url地址" method="提交方式" name="表单域名称">
  各种表单元素控件
</form>

常用属性：

属性 属性值 作用
action url地址 指定接受并处理表单数据得服务器的url地址
method get/post 设置表单数据的提交方式
name 名称 用于指定表单名称，区分同一个页面中的多个表单域
3.5.2.9.2. 表单控件

在表单域中定义各种表单元素，允许用户在表单中输入或选择的内容控件。

3.5.2.9.2.1. input控件

<input> 标签用于收集用户信息。
input 标签包含 type 属性，决定了输入字段的不同形式：文本字段、复选框、掩码后的文本控件、单选按钮、按钮等。

<input type="属性值" value="你好" />

  • input 输入的意思

  • <input />标签为单标签

  • type属性设置不同的属性值用来指定不同的控件类型

  • 除了type属性还有别的属性

  • HTML input 标签

  • HTML Input 属性

常用属性

属性 属性值 描述
type text 单行文本输入框
password 密码输入框
radio 单选按钮
checkbox 复选框
button 普通按钮
submit 提交按钮
reset 重置按钮
image 图像形式的提交按钮
file 文件域
name 由用户自定义 控件的名称
value 由用户自定义 input控件中的默认文本值
size 正整数 input控件在页面中的显示宽度
checked checked 定义选择控件默认被选中的项
maxlength 正整数 控件允许输入的最多字符数 
用户名: <input type="text" /> 
密  码：<input type="password" />

value属性

value 默认的文本值。有些表单想刚打开页面就默认显示几个文字，就可以通过这个value 来设置

用户名:<input type="text"  name="username" value="请输入用户名">

name属性

  • name表单的名字， 这样，后台可以通过这个name属性找到这个表单。 页面中的表单很多，name主要作用就是用于区别不同的表单。
    • name属性后面的值，是我们自己定义的。
    • radio 如果是一组，我们必须给他们命名相同的名字 name 这样就可以多个选其中的一个啦
    • name属性，我们现在用的较少，但是，当我们学ajax 和后台的时候，是必须的。
<input type="radio" name="sex"  />男
<input type="radio" name="sex" />女

checked属性

表示默认选中状态。 较常见于 单选按钮和复选按钮。

性    别:
<input type="radio" name="sex" value="男" checked="checked" />男
<input type="radio" name="sex" value="女" />女
3.5.2.9.2.2. label标签
  • label 标签为 input 元素定义标注（标签）。
  • label 标签主要目的是为了提高用户体验。为用户提高最优秀的服务。
  • 作用：用于绑定一个表单元素, 当点击 label 标签的时候, 被绑定的表单元素就会获得输入焦点。
<!-- 第一种用法就是用label标签直接包含input表单， 适合单个表单选择 -->
<label> 用户名： 
<input type="radio" name="usename" value="请输入用户名">   
</label>

<!-- 第二种用法 for 属性规定 label 与哪个表单元素绑定(通过id)。 -->
<label for="sex">男</label>
<input type="radio" name="sex"  id="sex">
3.5.2.9.2.3. select 下拉表单元素

select 标签设置多个选项让用户选择，节约页面空间

<select>
    <option>选项1</option>
    <option>选项2</option>
    <option>选项3</option>
</select>
  • select 中至少包含一对 option。
  • 在 option 中定义属性selected=selected，当前项即为默认选项。
3.5.2.9.2.4. textarea控件(文本域)
  • 通过 textarea 控件可以轻松地创建多行文本输入框.
  • cols="每行中的字符数" rows="显示的行数" 我们实际开发不用
<textarea rows="3" cols="20">
    文本内容
</textarea>

文本框和文本域区别：

表单 名称 区别 默认值显示 用于场景
<input type="text" /> 文本框 只能显示一行文本 单标签，通过value显示默认值 用户名、昵称、密码等
textarea 文本域 可以显示多行文本 双标签，默认值写到标签中间 留言板
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zy440458/article/details/122728817

智能推荐

while循环&CPU占用率高问题深入分析与解决方案_main函数使用while(1)循环cpu占用99-程序员宅基地

文章浏览阅读3.8k次，点赞9次，收藏28次。直接上一个工作中碰到的问题，另外一个系统开启多线程调用我这边的接口，然后我这边会开启多线程批量查询第三方接口并且返回给调用方。使用的是两三年前别人遗留下来的方法，放到线上后发现确实是可以正常取到结果，但是一旦调用，CPU占用就直接100%(部署环境是win server服务器)。因此查看了下相关的老代码并使用JProfiler查看发现是在某个while循环的时候有问题。具体项目代码就不贴了，类似于下面这段代码。​​​​​​while(flag) {//your code;}这里的flag._main函数使用while(1)循环cpu占用99

【无标题】jetbrains idea shift f6不生效_idea shift +f6快捷键不生效-程序员宅基地

文章浏览阅读347次。idea shift f6 快捷键无效_idea shift +f6快捷键不生效

node.js学习笔记之Node中的核心模块_node模块中有很多核心模块,以下不属于核心模块,使用时需下载的是-程序员宅基地

文章浏览阅读135次。Ecmacript 中没有DOM 和 BOM核心模块Node为JavaScript提供了很多服务器级别，这些API绝大多数都被包装到了一个具名和核心模块中了，例如文件操作的 fs 核心模块 ，http服务构建的http 模块 path 路径操作模块 os 操作系统信息模块// 用来获取机器信息的var os = require('os')// 用来操作路径的var path = require('path')// 获取当前机器的 CPU 信息console.log(os.cpus._node模块中有很多核心模块,以下不属于核心模块,使用时需下载的是

数学建模【SPSS 下载-安装、方差分析与回归分析的SPSS实现(软件概述、方差分析、回归分析)】_化工数学模型数据回归软件-程序员宅基地

文章浏览阅读10w+次，点赞435次，收藏3.4k次。SPSS 22 下载安装过程7.6 方差分析与回归分析的SPSS实现7.6.1 SPSS软件概述1 SPSS版本与安装2 SPSS界面3 SPSS特点4 SPSS数据7.6.2 SPSS与方差分析1 单因素方差分析2 双因素方差分析7.6.3 SPSS与回归分析SPSS回归分析过程牙膏价格问题的回归分析_化工数学模型数据回归软件

利用hutool实现邮件发送功能_hutool发送邮件-程序员宅基地

文章浏览阅读7.5k次。如何利用hutool工具包实现邮件发送功能呢？1、首先引入hutool依赖<dependency> <groupId>cn.hutool</groupId> <artifactId>hutool-all</artifactId> <version>5.7.19</version></dependency>2、编写邮件发送工具类package com.pc.c..._hutool发送邮件

docker安装elasticsearch，elasticsearch-head，kibana，ik分词器_docker安装kibana连接elasticsearch并且elasticsearch有密码-程序员宅基地

文章浏览阅读867次，点赞2次，收藏2次。docker安装elasticsearch，elasticsearch-head，kibana，ik分词器安装方式基本有两种，一种是pull的方式，一种是Dockerfile的方式，由于pull的方式pull下来后还需配置许多东西且不便于复用，个人比较喜欢使用Dockerfile的方式所有docker支持的镜像基本都在https://hub.docker.com/docker的官网上能找到合..._docker安装kibana连接elasticsearch并且elasticsearch有密码

随便推点

Python 攻克移动开发失败！_beeware-程序员宅基地

文章浏览阅读1.3w次，点赞57次，收藏92次。整理 | 郑丽媛出品 | CSDN（ID：CSDNnews）近年来，随着机器学习的兴起，有一门编程语言逐渐变得火热——Python。得益于其针对机器学习提供了大量开源框架和第三方模块，内置..._beeware

Swift4.0_Timer 的基本使用_swift timer 暂停-程序员宅基地

文章浏览阅读7.9k次。//// ViewController.swift// Day_10_Timer//// Created by dongqiangfei on 2018/10/15.// Copyright 2018年 飞飞. All rights reserved.//import UIKitclass ViewController: UIViewController { ..._swift timer 暂停

元素三大等待-程序员宅基地

文章浏览阅读986次，点赞2次，收藏2次。1.硬性等待让当前线程暂停执行，应用场景：代码执行速度太快了，但是UI元素没有立马加载出来，造成两者不同步，这时候就可以让代码等待一下，再去执行找元素的动作线程休眠，强制等待 Thread.sleep(long mills)package com.example.demo;import org.junit.jupiter.api.Test;import org.openqa.selenium.By;import org.openqa.selenium.firefox.Firefox.._元素三大等待

Java软件工程师职位分析_java岗位分析-程序员宅基地

文章浏览阅读3k次，点赞4次，收藏14次。Java软件工程师职位分析_java岗位分析

Java：Unreachable code的解决方法_java unreachable code-程序员宅基地

文章浏览阅读2k次。Java：Unreachable code的解决方法_java unreachable code

标签data-*自定义属性值和根据data属性值查找对应标签_如何根据data-*属性获取对应的标签对象-程序员宅基地

文章浏览阅读1w次。1、html中设置标签data-*的值 标题 11111 222222、点击获取当前标签的data-url的值$('dd').on('click', function() { var urlVal = $(this).data('ur_如何根据data-*属性获取对应的标签对象

推荐文章

热门文章

相关标签