HTML完整版,学HTML看这篇就够了-程序员宅基地

技术标签：前端 html 前端学习

欢迎来到哈小周的博客,点此进入原博客
对于不能正常预览的地方,可以在原博客中查看.

前序知识

计算机基础知识

计算机由硬件+软件组成:

硬件:看得见,摸得着的物理部件
软件:可以指挥硬件工作的指令

软件的分类:
系统软件:windows,Linux,Android,Harmony等
应用软件:微信,QQ,王者荣耀等
整体图示:

C/S架构与B/S架构

上面提到的应用软件又分为两类:
1. C/S架构: 特点:需要安装,偶尔更新,不跨平台,开发更具针对性
2. B/S架构: 特点:无需安装,无需更新,可跨平台,开发更具通用性

C=>Client,B=>browser,S=>server

前端工程师主要负责编写B/S架构中的网页

网页相关概念

网址: 我们在浏览器上输入的地址
网页:浏览器所呈现的每一个页面
网站:多个网页构成一个网站
网页标准:

HTML简介

什么是HTML?
全称:Hyper Text Markup Language,超文本标记语言
超文本:指的是网页中可以包含图片,链接,音频,视频等多媒体内容
标记:文本要变为超文本,就需要用到各种标记符号
语言:每一个标记的写法都是有规定的,这种规定就是一种语言
相关国际组织
1.IETF:Internet Engineering Task Force,互联网工程任务组.创建于1985年,是一个开放的国际社区,致力于通过协商和合作,促进互联网的技术发展和标准化,以及解决互联网的技术问题

2.W3C:World Wide Web Consortium,万维网联盟.创建于1994年,是目前Web技术领域,最权威的标准化组织,致力于推动Web技术的发展和标准化,以及解决Web技术的问题

3.WHATWG:Web Hypertext Application Technology Working Group,Web超文本应用技术工作组.创建于2004年,是一个开放的社区,致力于推动Web技术的发展和标准化,以及解决Web技术的问题
HTML的发展历程
1. HTML1.0:1993年,由蒂姆·伯纳斯-李创建,只有18个标签
2. HTML2.0:1995年,由IETF发布,增加了表格,表单等标签
3. HTML3.2:1997年,由W3C发布,增加了框架,层等标签
4. HTML4.01:1999年,由W3C发布,增加了样式表,脚本等标签
5. XHTML1.0:2000年,由W3C发布,是HTML4.01的升级版,更加严格
6. HTML5:2014年,由WHATWG发布,增加了多媒体,图形,语义化等标签

HTML入门

HTML标签

标签(元素):是HTML中最基本的单位,由尖括号包裹的关键字
标签分为双标签和单标签(绝大多数都是双标签)
标签名不区分大小写,但是推荐使用小写
双标签:由开始标签和结束标签组成,中间包含了其他的标签或者文本

示例代码:

<marquee>欢迎来到哈晓周</marquee>

单标签:只有一个开始标签,没有结束标签,一般用于插入一些单一的内容
示例代码:

<img src="https://hitszzhou.oss-cn-shenzhen.aliyuncs.com/assets202402242255034.png" alt="哈晓周">

标签之间的关系:并列,嵌套.

HTML标签属性

用于给标签添加一些额外的信息
可以写在起始标签中或单标签中,形式如下:

<标签名 属性名="属性值">内容</标签名>
<标签名 属性名="属性值"/>

有些特殊的属性,没有属性名,只有属性值,例如:

<input/>

注意点:
不同的标签有不同的属性;也有一些属性是所有标签都有的,例如id,class
属性名,属性值不能乱写,是W3C规定的
属性名,属性值不区分大小写,但是推荐使用小写
属性值可以用双引号,单引号,也可以不用引号,但推荐用双引号
标签中不能出现同名属性,否则后写的会失效

HTML基本结构

网页的基本结构如下:

想要呈现的内容写在body标签中

head标签中写一些网页的基本信息,例如:标题,字符集,引入外部文件等,不会在网页中显示

head标签中的title标签中写网页的标题,会显示在浏览器的标题栏中

<html>
    <head>
        <title>网页标题</title>
    </head>
    <body>
        ......
    </body>
 </html>

HTML注释

特点:注释内容不会在网页中显示
作用:用于对代码进行解释,调试,或者临时屏蔽一些代码
注释的写法:

<!-- 注释内容 -->

注释的内容不能嵌套,如下反例:

<!-- 注释1<!-- 注释2 -->注释1 -->

HTML文档声明

作用:告诉浏览器当前网页是用哪个版本的HTML编写的
写法:
旧版写法:要依网页所用的HTML版本而定,写法很多.具体参考:W3C官网-文档声明
新版写法:

<!DOCTYPE html>
或
<!DOCTYPE HTML>
或
<!doctype html>

HTML字符编码

计算机对数据的操作:
- 存储时,对数据进行编码
- 读取时,对数据进行解码
编码,解码,会遵循一定的规范,这种规范就是字符集
字符集有很多种,常见的有:
- ASCII:美国信息交换标准代码,只包含了英文字符,数字,符号,不包含中文
- ISO-8859-1:拉丁码表,包含了西欧字符,不包含中文
- GB2312:中国国家标准,包含了中文,英文,数字,符号
- GBK:GB2312的升级版,包含了更多的中文字符
- UTF-8:万国码,包含了全世界所有的字符,是目前最常用的字符集
HTML中的字符编码写法:

<head>
  <meta charset="UTF-8"/>
</head>

HTML设置语言

作用:
- 告诉搜索引擎,网页是用哪种语言编写的,有利于搜索引擎优化
- 告诉浏览器,网页是用哪种语言编写的,让浏览器显示对应的翻译提示
写法:

<html lang="zh-CN">

lang属性的编写规则:

第一种写法(推荐):语言代码-国家代码,例如:

zh-CN:中文-中国

zh-TW:中文-台湾

zh:中文

en-US:英文-美国

en-GB:英文-英国

第二种写法:只写语言代码,例如:

zh-Hans:中文-简体

zh-Hant:中文-繁体

W3School提供了一个语言代码参考和国家代码参考

W3C官网上的说明:“Language tags in HTML”

HTML标准结构

HTML标准结构如下:

<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8"/>
    <title>我是该网页的标题</title>
  </head>
  <body>
    ...
  </body>
</html>

输入!,然后回车,可以自动生成HTML标准结构
配置VScode的内置插件emmet,可以对生成结构属性进行定制:
点击左下角的设置按钮
找到extensions中的emmet配置
如图方式添加一个"item-value"属性:
在存放代码的文件夹中,存放一个’.ico’图片,可以配置网页的图标

HTML基础

开发者文档

排版标签

标签名	标签含义	单/双标签
`<h1>~<h6>`	标题标签	双标签
`<p>`	段落标签	双标签
`<div>`	块级标签,没有任何含义	双标签

h1最多写一个,h2~h6可以写多个
h1~h6不能嵌套使用
p标签很特殊,其内部不能包含块级标签,例如:h1~h6,div,p

语义化标签

概念:用特定的标签,表达特定的含义
原则:标签的默认效果并不重要,重要的是标签的含义
优点:
1. 有利于搜索引擎优化
2. 有利于开发者阅读和维护代码
3. 有利于开发者理解网页结构
4. 有利于开发者写出更好的代码

块级元素与行内元素

块级元素:

特点:独占一行,可以设置宽高,默认宽度为100%
常见的块级元素:div,h1~h6,p,ul,ol,li,dl,dt,dd,table,form

行内元素:

特点:不独占一行,不能设置宽高,宽度随内容而定
常见的行内元素:span,a,img,em,strong,i,b,br,input,select,textarea

使用原则:
块级元素可以包含行内元素,也可以包含块级元素
行内元素只能包含行内元素,不能包含块级元素
一些特殊规则:
1. h1~h6 不能互相嵌套
2. p标签内不能包含块级元素

常用的文本标签

标签名	标签含义	单/双标签
`em`	要着重强调的内容	双标签
`strong`	更加着重强调的内容	双标签
`span`	没有特定含义的标签	双标签
`a`	超链接标签	双标签
`cite`	作品标题	双标签
`dfn`	特殊术语或专有名词	双标签
`del`	被删除的内容	双标签
`ins`	被插入的内容	双标签
`sub`	下标	双标签
`sup`	上标	双标签
`code`	一段代码	双标签
`samp`	从正常的上下文中,将某些内容提取出来	双标签
`kbd`	键盘输入	双标签
`var`	变量	双标签

图片标签

作用:用于在网页中显示图片
写法:

<img src="图片路径" alt="图片描述" width="图片宽度" height="图片高度"/>

超链接

作用:用于在网页中跳转到其他网页或者其他位置

标签名	标签语义	常用属性	单/双标签
`<a>`	超链接	`href`: 指定要跳转到的具体目标 `target`: 控制跳转时如何打开页面,常用值有`_blank` `id`: 用于锚点跳转,指定跳转目标的id `name`:元素的名字,写在`a`标签中,用于锚点跳转	双标签

跳转到其他网页:

<!--跳转到其他页面-->
<a href="http://www.baidu.com">百度</a>

<!--跳转本地网页-->
<a href="./10_HTML排版标签.html" target="_self">看排版标签</a>

跳转到文件

<!-- 浏览器能直接打开的文件 -->
 <a href="./resource/自拍.jpg">看自拍</a>
 <a href="./resource/小电影.mp4">看小电影</a>
 <a href="./resource/小姐姐.gif">看小姐姐</a>
 <a href="./resource/如何一夜暴富.pdf">点我一夜暴富</a>
 <!-- 浏览器不能打开的文件，会自动触发下载 -->
 <a href="./resource/内部资源.zip">内部资源</a>
 <!-- 强制触发下载 -->
 <a href="./resource/小电影.mp4" download="电影片段.mp4">下载电影</a>

注意1:若浏览器不能打开文件,则会触发自动下载
注意2:若想强制触发下载,则需要添加download属性

跳转到锚点
设置锚点

<a name="test1"></a>

<h2 id="test2">这是一个位置</h2>

跳转锚点

<!--跳转到test1-->
<a href="#test1">跳转到test1</a>

<!--跳转到test2-->
<a href="#test2">跳转到test2</a>

<!--跳转到页面顶部-->
<a href="#">回到顶部</a>

<!--跳转到页面底部-->
<a href="#bottom">跳转到底部</a>

<!--跳转到其他页面的锚点-->
<a href="./10_HTML排版标签.html#test1">跳转到排版标签页面的test1</a>

唤起指定应用
通过a标签的href属性,可以唤起指定的应用,例如:

<!--唤起电话应用-->
<a href="tel:10086">联系客服</a>

<!--唤起短信应用-->
<a href="sms:10086">联系客服</a>

<!--唤起邮件应用-->
<a href="mailto:[email protected]">联系博主</a>

列表

无序列表

作用:用于显示一组没有顺序关系的列表
写法:

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

有序列表

作用:用于显示一组有顺序关系的列表
写法:

<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ol>

自定义列表

作用:用于显示一组自定义的列表
写法:

<dl>
  <dt>术语1</dt>
  <dd>解释1</dd>
  <dt>术语2</dt>
  <dd>解释2</dd>
  <dt>术语3</dt>
  <dd>解释3</dd>  
</dl>

dl:definition list,定义列表
dt:definition term,定义术语
dd:definition description,定义描述

表格

基本结构
1. 一个完整的表格由:表格标题,表格头部,表格主体,表格脚部组成
2. 表格涉及到的标签
  1. table:用于创建表格
  2. caption:用于创建表格标题
  3. thead:用于创建表格头部
  4. tbody:用于创建表格主体
  5. tfoot:用于创建表格脚部
  6. tr:用于创建表格行
  7. th,td:用于创建表格单元(表格头部中用th,表格主体中用td,h代表header,d代表data)
常用属性

标签名	标签语义	常用属性	单/双标签
`table`	表格	`width`:设置表格宽度 `height`:设置表格高度 `border`:设置表格边框 `cellpadding`:设置单元格内边距 `cellspacing`:设置单元格间距	双标签
`thead`	表格头部	`align`:设置表格头部的水平对齐方式 `valign`:设置表格头部的垂直对齐方式	双标签
`tbody`	表格主体	`align`:设置表格主体的水平对齐方式 `valign`:设置表格主体的垂直对齐方式	双标签
`tr`	表格行	`align`:设置表格行的水平对齐方式 `valign`:设置表格行的垂直对齐方式	双标签
`tfoot`	表格脚注	`align`:设置表格脚注的水平对齐方式 `valign`:设置表格脚注的垂直对齐方式	双标签
`td`	普通单元格	`colspan`:设置单元格横跨的列数 `rowspan`:设置单元格横跨的行数	双标签
`th`	表头单元格	`colspan`:设置单元格横跨的列数 `rowspan`:设置单元格横跨的行数	双标签

常用标签补充

标签名	标签含义	单/双标签
`hr`	分割线	单标签
`br`	换行	单标签
`pre`	预格式化文本(按原文显示)	双标签

表单

概念: 一个交互式区域,用于收集用户的输入信息

表单的基本结构

标签名	标签含义	常用属性	单/双标签
`form`	表单	`action`:表单提交的地址 `method`:表单提交的方式 `enctype`:表单提交的数据类型	双标签
`input`	输入框	`type`:输入框的类型 `name`:输入框的名字 `value`:输入框的值 `placeholder`:输入框的提示信息	单标签
`button`	按钮	`type`:按钮的类型	双标签

常用表单控件

文本输入框

<input type="text">

常用属性如下:
name:数据的名称
value:输入数据的默认值
maxlength:输入数据的最大长度

密码输入框

<input type="password">

常用属性如下:
name:数据的名称
value:输入数据的默认值(一般不用)
maxlength:输入数据的最大长度

单选框

{% tabs 分栏 %}

<input type="radio" name="***" value="***">**

name: 数据的名称,想要实现单选的效果,必须保证同一组单选框的name属性值相同
value: 提交的数据值
选中状态: 让该按钮默认选中

<input type="radio" name="sex" value="male"> 男
<input type="radio" name="sex" value="female">女

男
女

{% endtabs %}

复选框

{% tabs 分栏 %}

<input type="checkbox" name="" value=""> 名字

name: 数据的名称,想要实现单选的效果,必须保证同一组单选框的name属性值相同
value: 提交的数据值
选中状态: 让该复选框默认选中

        <input type="checkbox" name="hobby" value="smoke" checked>抽烟
        <input type="checkbox" name="hobby" value="drink">喝酒
        <input type="checkbox" name="hobby" value="perm">烫头

抽烟
喝酒
烫头

{% endtabs %}

隐藏框

作用:用于存放一些不需要用户输入的数据,例如:用户id,用户token等
{% tabs 分栏 %}

<input type="hidden" name="" value="">

name:数据的名称
value:数据的值

<input type="hidden" name="id" value="123">

{% endtabs %}

提交按钮

{% tabs 分栏 %}

        <!--确认按钮的第一种写法-->
        <button>确认</button>
        <!--确认按钮的第二种写法-->
        <input type="submit" value="确认">

value:数据的值
type:button的type属性值,默认为submit

        <!--确认按钮的第一种写法-->
        <button>确认</button>
        <!--确认按钮的第二种写法-->
        <input type="submit" value="确认">

确认

{% endtabs %}

重置按钮

{% tabs 分栏 %}

        <!--重置按钮_第一种-->
        <button type="reset">重置</button>
        <!--重置按钮_第二种-->
        <input type="reset" value="重置">

value:数据的值,等效于button的内容
type:默认为reset

        <button type="reset">重置</button>
        <!--重置按钮_第二种-->
        <input type="reset" value="重置">

重置

{% endtabs %}

普通按钮

{% tabs 分栏 %}

        <!--普通按钮_第一种-->
        <button type="button">普通按钮</button>
        <!--普通按钮_第二种-->
        <input type="button" value="普通按钮">

value:数据的值,等效于button的内容
type:默认为button

        <!--普通按钮_第一种-->
        <button type="button">普通按钮</button>
        <!--普通按钮_第二种-->
        <input type="button" value="普通按钮">

普通按钮

{% endtabs %}

文本域

{% tabs 分栏 %}

<textarea name="" id="" cols="" rows=""></textarea>

name:数据的名称
id:数据的id
cols:文本域的列数
rows:文本域的行数

<textarea name="content" id="content" cols="30" rows="10"></textarea>

{% endtabs %}

下拉框

{% tabs 分栏 %}

<select name="" id="">
  <option value="">选项1</option>
  <option value="">选项2</option>
  <option value="">选项3</option>
</select>

name:数据的名称
id:数据的id
value:数据的值
selected:默认选中
disabled:禁用

<select name="city" id="city">
  <option value="bj">北京</option>
  <option value="sh">上海</option>
  <option value="gz">广州</option>
  <option value="sz" selected>深圳</option>
  <option value="cd" disabled>成都</option>
</select>

北京上海广州深圳成都 {% endtabs %}

label标签

作用: label标签可以与表单控件关联,点击文字后,与之相对应的表单控件就会获取焦点.

两种写法:

让label的for属性值等于表单控件的id值
把表单控件套在label标签中

fieldset与legend标签(了解)

fieldset标签:用于将表单内的相关元素进行分组
legend标签:用于为fieldset标签设置标题

本文链接：https://blog.csdn.net/zhoudalao/article/details/136290533

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

使用nginx解决浏览器跨域问题_nginx不停的xhr-程序员宅基地

文章浏览阅读1k次。通过使用ajax方法跨域请求是浏览器所不允许的，浏览器出于安全考虑是禁止的。警告信息如下：不过jQuery对跨域问题也有解决方案，使用jsonp的方式解决，方法如下：$.ajax({ async:false, url: 'http://www.mysite.com/demo.do', // 跨域URL ty..._nginx不停的xhr

在 Oracle 中配置 extproc 以访问 ST_Geometry-程序员宅基地

文章浏览阅读2k次。关于在 Oracle 中配置 extproc 以访问 ST_Geometry，也就是我们所说的使用空间SQL 的方法，官方文档链接如下。http://desktop.arcgis.com/zh-cn/arcmap/latest/manage-data/gdbs-in-oracle/configure-oracle-extproc.htm其实简单总结一下，主要就分为以下几个步骤。..._extproc

Linux C++ gbk转为utf-8_linux c++ gbk->utf8-程序员宅基地

文章浏览阅读1.5w次。linux下没有上面的两个函数，需要使用函数 mbstowcs和wcstombsmbstowcs将多字节编码转换为宽字节编码wcstombs将宽字节编码转换为多字节编码这两个函数，转换过程中受到系统编码类型的影响，需要通过设置来设定转换前和转换后的编码类型。通过函数setlocale进行系统编码的设置。linux下输入命名locale -a查看系统支持的编码_linux c++ gbk->utf8

IMP-00009: 导出文件异常结束-程序员宅基地

文章浏览阅读750次。今天准备从生产库向测试库进行数据导入，结果在imp导入的时候遇到“ IMP-00009:导出文件异常结束” 错误，google一下，发现可能有如下原因导致imp的数据太大，没有写buffer和commit两个数据库字符集不同从低版本exp的dmp文件，向高版本imp导出的dmp文件出错传输dmp文件时，文件损坏解决办法：imp时指定..._imp-00009导出文件异常结束

python程序员需要深入掌握的技能_Python用数据说明程序员需要掌握的技能-程序员宅基地

文章浏览阅读143次。当下是一个大数据的时代，各个行业都离不开数据的支持。因此，网络爬虫就应运而生。网络爬虫当下最为火热的是Python，Python开发爬虫相对简单，而且功能库相当完善，力压众多开发语言。本次教程我们爬取前程无忧的招聘信息来分析Python程序员需要掌握那些编程技术。首先在谷歌浏览器打开前程无忧的首页，按F12打开浏览器的开发者工具。浏览器开发者工具是用于捕捉网站的请求信息，通过分析请求信息可以了解请..._初级python程序员能力要求

Spring @Service生成bean名称的规则（当类的名字是以两个或以上的大写字母开头的话，bean的名字会与类名保持一致）_@service beanname-程序员宅基地

文章浏览阅读7.6k次，点赞2次，收藏6次。@Service标注的bean，类名：ABDemoService查看源码后发现，原来是经过一个特殊处理：当类的名字是以两个或以上的大写字母开头的话，bean的名字会与类名保持一致public class AnnotationBeanNameGenerator implements BeanNameGenerator { private static final String C..._@service beanname