大家好,我是花无缺,一个风一样的男子,热爱各种开发技术,感谢各位大佬的阅读 !
CSDN博客地址:https://blog.csdn.net/huawuque404
欢迎 点赞 收藏⭐ 留言 加关注✅!
本文由 huawuque404 原创
每一个不曾起舞的日子都是对生命的辜负✨
欢迎来到HTML专栏,这里是专栏第一篇文章,同时也是我加入CSDN的第一篇文章,历时多天,制作精良,希望能够帮助到大家的学习!如有不周之处,请不吝赐教!
互联网技术的学习是一条看不到头的路,需要用一生去热爱,持之以恒的学习。
而目前互联网公司的两大招聘岗位则有前端工程师
和后端工程师
,前端便是在浏览器中人们所能看到的网页,网页的内容就是使用前端技术构建的,而网页背后的数据与网页的逻辑运行则是依靠后端技术的支撑。这就是对前端与后端最基本的认知。无论是前端还是后端的学习都是不容易的,甚至可以说是特别困难,因为两门技术栈涉及的知识面广,技术体系大,技术内容繁多,导致他们的学习都是很困难的。当然了,不管有多么困难,只要有一颗勇敢的心,热爱技术的心,再加上持之以恒的心就一定会慢慢攻克。接下来,我将会持续给大家呈现上自己的技术笔记和大家一起交流学习!
超文本标记语言
(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。HTML是一种基础技术,常与CSS、JavaScript一起被众多网站用于设计网页、网页应用程序以及移动应用程序的用户界面。网页浏览器可以读取HTML文件,并将其渲染成可视化网页。HTML描述了一个网站的结构语义随着线索的呈现,使之成为一种标记语言而非编程语言。
HTML元素是构建网站的基石。HTML允许嵌入图像与对象,并且可以用于创建交互式表单,它被用来结构化信息——例如标题、段落和列表等等,也可用来在一定程度上描述文档的外观和语义。HTML的语言形式为尖括号包围的HTML元素(如),浏览器使用HTML标签和脚本来诠释网页内容,但不会将它们显示在页面上。
HTML可以嵌入如JavaScript的脚本语言,它们会影响HTML网页的行为。网页浏览器也可以引用层叠样式表(CSS)来定义文本和其它元素的外观与布局。维护HTML和CSS标准的组织万维网联盟(W3C)鼓励人们使用CSS替代一些用于表现的HTML元素。
层叠样式表
(英语:Cascading Style Sheets,缩写:CSS;又称串样式列表、级联样式表、串接样式表、阶层式样式表)是一种用来为结构化文档(如HTML文档或XML应用)添加样式(字体、间距和颜色等)的计算机语言,由W3C定义和维护。CSS3现在已被大部分现代浏览器支持,而下一版的CSS4仍在开发中。
CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。
简称JS
JavaScript
(通常缩写为JS)是一门基于原型和头等函数的多范式高级解释型编程语言,它支持面向对象程序设计、指令式编程和函数式编程。它提供方法来操控文本、数组、日期以及正则表达式等。不支持I/O,比如网络、存储和图形等,但这些都可以由它的宿主环境提供支持。它由ECMA(欧洲电脑制造商协会)通过ECMAScript实现语言的标准化。目前,它被世界上的绝大多数网站所使用,也被世界主流浏览器(Chrome、Firefox、Safari和Opera)所支持。
JavaScript与Java在名字和语法上都很相似,但这两门编程语言从设计之初就有很大不同。JavaScript在语言设计上主要受到了Self(一种基于原型的编程语言)和Scheme(一门函数式编程语言)的影响,在语法结构上它和C语言很相似(如if条件语句、switch语句、while循环和do-while循环等)。
对于客户端来说,JavaScript通常被实现为一门解释语言,但如今它已经可以被即时编译(JIT)。随着HTML5和CSS3语言标准的推行,它还可以用于游戏、桌面和移动应用程序的开发,以及在服务器端网络环境运行(如Node.js)。
一个完美的网页效果需要这三个技术相互配合,相辅相成
Hyper Text Markup Language
超文本标记语言
HTML是用来描述网页的语言,它是网页的结构,一个网页必须要有HTML作为结构支撑,这样浏览器才可以呈现出具有结构的标准的网页结构
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML标签通常也称为HTML元素
属性是HTML元素提供的附加信息
例如:
DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>huawuque404title>
head>
<body>
<a href="https://blog.csdn.net/huawuque404">我的博客a>
body>
html>
从1991年第一版HTML发布后HTML不断在更新,现在主流的HTML的版本是HTML5,HTML5不仅新增了很多特性,同时也兼容历史版本
版本 | 发行时间 |
---|---|
HTML | 1991 |
HTML+ | 1993 |
HTML 2.0 | 1995 |
HTML 3.2 | 1997 |
HTML 4.01 | 1999 |
XHTML 1.0 | 2000 |
HTML5 | 2012 |
XHTML5 | 2013 |
官网:https://code.visualstudio.com/
是一个由微软开发的,同时支持 Windows 、 Linux 和 macOS 等操作系统且开放源代码的代码编辑器,编辑器可以安装拓展程序,提高了开发和工作的效率,结合拓展程序几乎支持所有主流的编程语言,
它免费且体积小,深受开发者的喜爱
官网:http://www.sublimetext.com/
Sublime Text 是一个文本编辑器(收费软件,可以无限期试用),同时也是一个先进的代码编辑器。
官网:https://www.adobe.com/cn/products/dreamweaver.html
Adobe Dreamweaver,简称“DW”。DW是集网页制作和管理网站于一身的所见即所得网页代码编辑器。利用对 HTML、CSS、JavaScript等内容的支持,设计师和程序员可以在几乎任何地方快速制作和进行网站建设。
官网:https://www.jetbrains.com/zh-cn/webstorm/
WebStorm 是JetBrains公司旗下一款JavaScript 开发工具。已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。
vscode安装及配置教程:安装配置教程
按照上面的教程根据自己的需要对vscode进行配置即可使用vscode尽情的写前端了
下面是一段HTML代码
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>花无缺title>
head>
<body>
<h1>我的第一个标题h1>
<h2>我的第二个标题h2>
<p>我的第一个段落。p>
body>
html>
声明为 HTML5 文档
元素是 HTML 页面的根元素
元素定义一个段落
注:在浏览器的页面上使用键盘上的 F12 按键进入开发者模式,就可以看到组成标签。
HTML、CSS以及JavaScript的代码要在web浏览器
中运行,才可以看到效果
常用的web浏览器:谷歌浏览器Google Chrome、微软浏览器Microsoft Edge(原IE浏览器)、火狐浏览器Firefox、欧朋浏览器Opera、苹果safari浏览器
作者用的是谷歌和Edge,这里我推荐谷歌浏览器,响应速度很快,但是谷歌浏览器也有个小毛病就是国内用户不可以登录谷歌账户,就无法随时同步浏览器的浏览记录和书签等个人信息,换设备使用会有一定麻烦
DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>实例2title>
head>
<body>
<h4>下面是html实例演示h4>
<p>
这是一个段落。<br>
学习 HTML 最好的方式就是边学边做实验。<br>
<h1>一级标题h1>
<h2>二级标题h2>
<h3>三级标题h3>
<h4>四级标题h4>
<h5>五级标题h5>
<h6>六级标题h6>
<a href="https://blog.csdn.net/huawuque404" target="_blank">这是一个超链接,点击就可以跳转到目标网页a>
<img src="https://img-blog.csdnimg.cn/920771cb50e842dd89d0f181f30c0e9a.png">
p>
body>
html>
SEO(Search Engine Optimization):搜索引擎优化
作用:让网站在搜索引擎上的排名靠前
提示SEO的常见方法:
例如:
<title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物!title>
例如:
<meta name="description" content="京东JD.COM-专业的综合网上购物商城,为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家,囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类,满足各种购物需求。">
例如:
<meta name="Keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东">
例如:
<link rel="shortcut icon" href="ico图标路径" type="image/x-icon">
注释的格式:
例如:
DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>huawuque404title>
head>
<body>
<p>这是一个帅哥p>
<p>这是一个美女p>
body>
html>
注释的作用:
为代码添加的具有理解性、描述性的信息,主要用来帮助前端开发人员理解代码
浏览器执行代码时会忽略所有的注释
结构说明:
<head>
<title>title>
head>
<head>head>
<body>body>
<h1>1级标题h1>
<h2>2级标题h2>
<h3>3级标题h3>
<h4>4级标题h4>
<h5>5级标题h5>
<h6>6级标题h6>
例如:
DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>huawuque404title>
head>
<body>
<h1>1级标题h1>
<h2>2级标题h2>
<h3>3级标题h3>
<h4>4级标题h4>
<h5>5级标题h5>
<h6>6级标题h6>
body>
html>
特点:
注意:
请确保将 HTML 标题 标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。
搜索引擎使用标题为您的网页的结构和内容编制索引。
因为用户可以通过标题来快速浏览您的网页,所以用标题来呈现文档结构是很重要的。
应该将 h1 用作主标题(最重要的),其后是 h2(次重要的),再其次是 h3,以此类推。
HTML段落可以把HTML文档分割成若干段落
<p>段落内容p>
例如:
DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>huawuque404title>
head>
<body>
<p>这是第一段,前端开发是创建WEB页面或APP等前端界面呈现给用户的过程,通过HTML,CSS及JavaScript以及衍生出来的各种技术、框架、解决方案,来实现互联网产品的用户界面交互。p>
<p>这是第二段,前端开发从网页制作演变而来,名称上有很明显的时代特征。在互联网的演化进程中,网页制作是Web1.0时代的产物,早期网站主要内容都是静态,以图片和文字为主,用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用,现代网页更加美观,交互效果显著,功能更加强大。
p>
<p>这是第三段,前端开发跟随移动互联网发展带来了大量高性能的移动终端设备应用。HTML5,Node.js的广泛应用,各类UI框架,JS类库层出不穷,开发难度也在逐步提升。p>
body>
html>
特点:
如果希望在不产生一个新段落的情况下进行换行(新行),可以使用
标签,换行标签是单标签
<br>
让文字强制换行
DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>huawuque404title>
head>
<body>
<p>
这是一句话
这是一句话
这句话之后会换行<br>
这是一句话
这是一句话
这是一句话
p>
body>
html>
注:为使页面更加简洁,下面内容的代码举例我会只保留里面的内容,省略等标签
水平线标签是单标签
<hr>
在网页上显示一条水平线
例如:
<body>
<p>这是第一个段落p>
<hr>
<p>这是第二个段落p>
<hr>
body>
HTML可定义很多供格式化输出的元素,比如粗体和斜体,文本格式化标签可以使标签内的文本产生不同的文字效果
标签 | 作用 |
---|---|
|
加粗 |
|
下划线 |
|
倾斜 |
|
删除线 |
|
加粗 |
|
下划线 |
|
倾斜 |
|
删除 |
推荐使用后四个文本格式化标签,因为它们更具有语义性
术语解释:
“语义”
语言所蕴含的意义就是语义(semantic)。简单的说,符号是语言的载体。符号本身没有任何意义,只有被赋予含义的符号才能够被使用,这时候语言就转化为了信息,而语言的含义就是语义。语义可以简单地看作是数据所对应的现实世界中的事物所代表的概念的含义,以及这些含义之间的关系,是数据在某个领域上的解释和逻辑表示。
例如:
<body>
<p>
<b>定义粗体文本b><br>
<em>定义斜体文字em><br>
<i>定义斜体字i><br>
<small>定义小号字small><br>
<big>定义大号字big><br>
<strong>定义加重语气strong><br><br>
花无缺<sub>定义下标字sub><br><br>
花无缺<sup>定义上标字sup><br><br>
<ins>定义下划线ins><br>
<del>定义删除字del><br>
<s>与del同效果s><br>
<strike>与del同效果strike><br>
<u>下划线u>
p>
body>
此外HTML中还提供了计算机输出标签 和 引用标签
计算机输出标签:
标签 | 作用 |
---|---|
|
定义计算机代码 |
|
定义键盘码 |
|
定义打字机代码 |
|
定义变量 |
|
定义预格式文本 |
例如:
<body>
<p>
<code>
Hello World!
code><br>
<samp>shiftsamp><br>
<tt>打字机代码tt><br>
<var>定义变量var><br>
<pre>
pre标签内的格式不会改变
花无缺
花无缺
花无缺
pre>
p>
body>
引用标签:
|
定义缩写 |
|
定义首字母缩写 |
|
定义地址 |
|
定义文字方向 |
|
定义长的引用 |
|
定义短的引用 |
|
定义引用、印证 |
|
定义一个定义项目 |
例如:
<body>
The <abbr title="People's Republic of China">PRCabbr> was founded in 1949.<br>
<address>
Written by <a href="huawuque404@163.com">huawuque404a>.<br>
Visit us at:<br>
Example.com<br>
fand 564, jack<br>
CHINA
address>
<p>
如果你的浏览器支持 bi-directional override (bdo),下一行会从右向左输出 (rtl);
p>
<bdo dir="rtl">
Here is some Hebrew text
bdo>
<br>
<blockquote>长的引用blockquote>
<q>短引用q><br>
<cite>引用,印证cite><br>
<dfn>定义一个定义项目dfn>
body>
<img src = "图片路径" alt = "无法加载图片时显示的文字信息">
代码中src和alt为标签属性,src和alt为属性名,“”中的内容为属性值
img标签如果要展示图片效果,则利用标签属性进行设置
例如:
<body>
<img src="https://wx1.sinaimg.cn/mw2000/006xNq9cgy1h66kfz733aj30j609i3yz.jpg" alt="这是帅气的作者本人">
body>
如果图片由于网络不稳定等原因无法加载出图片,则就会在对应位置显示alt属性中的文字
例如以上例子,当无法加载图片时浏览器的显示效果为:
注意:
HTML图像地图<map>标签和<area>
area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。
标签定义图像映射内部的区域(图像映射指的是带有可点击区域的图像)。
元素始终嵌套在
注释: 标签中的 usemap 属性与
例如:
<body>
<p>点击太阳或其他行星,注意变化:p>
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
map>
body>
属性值:图片的文件路径
属性值:图片的替换文本
作用:当图片无法正常加载显示时,替代图片显示出文字
属性值:提示文本
作用:当鼠标悬停在图片上时,显示出文字
注意:title属性不仅仅用于图片标签,还可以用于其他标签
属性值:图片的宽度和高度(数字)
注意:
路径就是文件的位置
比如某个本地计算机的D盘的哪个文件的路径
C:\Users\huawuque404\Desktop\前端code\picture\cat.jpg
或者在某个网络服务器的某个文件的路径
https://img-blog.csdnimg.cn/803b27ae38ed495d8d28859c68b4c3e5.png
而路径又分为绝对路径
和相对路径
目录下的绝对位置,可直接到达目标位置,通常从根目录开始的路径
例如:
1.根目录开头:C:\Users\huawuque404\Desktop\前端code\picture\cat.jpg
2.完整的网络地址:https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png
从当前文件出发的文件路径,可分为同级、下级,上级目录来理解和区分
我们以一个图片文件为例
当前文件和目标文件在同一目录(文件夹)中
使用路径的代码:
<img src = "目标图片.jpg">
或
<img src = "./目标图片.jpg">
./ 表示当前目录(文件)
目标文件在当前目录的下一级目录(子文件)中,则要进入到下一级目录中
使用路径的代码:
<img src = "目标图片所在的文件夹/目标图片.jpg">
目标文件在当前目录的上一级目录(父文件)中,则要返回到上一级目录
使用路径的代码:
<img src = "../目标图片所在的文件夹/目标图片.jpg">
返回一次上层目录使用一次 …/
例入目标文件在当前文件的上三层目录,则要在使用路径前加三个…/
../../../目标文件所在的文件夹/目标文件
<audio src = "音频文件路径" controls>audio>
属性:
属性 | 功能 |
---|---|
src | 音频路径 |
controls | 显示播放的控件 |
autoplay | 自动播放(部分浏览器不支持) |
loop | 循环播放 |
注意:目前HTML只支持三种音频格式:mp3、wav、ogg
例如:
<body>
<audio
src="http://m701.music.126.net/20220915004706/ddd5d1e6f42f43cbb095d307e3ea971b/jdymusic/obj/wo3DlMOGwrbDjj7DisKw/14096503516/68d0/e4dd/0407/77ef28fb12e677f5b79754c73f73cbd7.mp3"
controls>
audio>
body>
<video src = "视频文件路径" controls>video>
属性:
属性 | 功能 |
---|---|
src | 视频路径 |
controls | 显示播放的控件 |
autoplay | 自动播放(谷歌浏览器中需配合muted实现静音播放) |
loop | 循环播放 |
注意:HTML目前只支持三种视频格式:mp4、webm、ogg
例如:
<body>
<video
src="https://f.video.weibocdn.com/u0/PMKZle78gx07Z4EAHw3S010412046cfg0E020.mp4?label=mp4_1080p&template=1920x1080.25.0&media_id=4811757949222933&tp=8x8A3El:YTkl0eM8&us=0&ori=1&bf=2&ot=h&ps=3lckmu&uid=3ZoTIp&ab=,8143-g0,8013-g0,3601-g29,7598-g0&Expires=1663178348&ssig=gopQw3ve0G&KID=unistore,video"
controls>
video>
body>
又称a标签、锚链接
点击之后,从当前页面跳转到另一个页面
<a href = "跳转的网页地址">超链接a>
例如:
<a href="https://www.baidu.com">跳转到百度a>
如果不设置跳转,则可以把链接路径设置为#(空链接)
属性:target
取值 | 效果 |
---|---|
_self | 默认值,在当前窗口中跳转(覆盖原网页) |
_blank | 在新窗口中跳转(保留原网页) |
例如:
<body>
<a href="https://blog.csdn.net/huawuque404" target="_blank">一个超链接a>
body>
在网页中表示一组无顺序之分的列表
标签组成:
标签名 | 说明 |
---|---|
ul | 表示无序列表的整体,用于包裹li标签 |
li | 表示无序标签的每一项,用于包含每一行的内容 |
列表的每一项前默认显示圆点标识
注意:
在网页中表示一组有顺序之分的列表
标签组成:
标签名 | 说明 |
---|---|
ol | 表示有序列表的整体,用于包裹li标签 |
li | 表示有序标签的每一项,用于包含每一行的内容 |
列表的每一项前默认显示序号标识
注意:
标签名 | 说明 |
---|---|
dl | 表示自定义列表的整体,用于包裹dt/dd标签 |
dt | 表示自定义列表的主题 |
dd | 表示自定义列表的针对主题的每一项内容 |
dd前会默认显示缩进效果
注意:
例如:
<body>
<ul>
<li>有序列表li>
<li>有序列表li>
<li>有序列表li>
ul>
<ol>
<li>无序列表li>
<li>无序列表li>
<li>无序列表li>
ol>
<dl>自定义列表的整体
<dt>自定义列表的主题1
<dd>自定义列表dd>
<dd>自定义列表dd>
<dd>自定义列表dd>
dt>
<dt>自定义列表的主题2
<dd>自定义列表dd>
<dd>自定义列表dd>
<dd>自定义列表dd>
dt>
dl>
body>
在网页中以行+列的单元格的方式整齐展示数据
标签:
标签名 | 说明 |
---|---|
table | 表格整体,可用于包裹多个tr |
tr | 表格每行,可用于包裹td |
td | 表格单元格,可用于包裹内容 |
标签的嵌套关系:table>tr>td
属性:
属性名 | 属性值 | 效果 |
---|---|---|
border | 数字 | 边框宽度 |
width | 数字 | 表格宽度 |
height | 数字 | 表格高度 |
注意:实际开发时针对于样式效果推荐使用CSS设置
术语解释:
“CSS”
级联样式表 Cascading Style Sheet
例如:
<body>
<table border="5">
<tr>
<td>第一行td>
<td>单元格1td>
<td>单元格2td>
tr>
<tr>
<td>第二行td>
<td>单元格1td>
<td>单元格2td>
tr>
table>
body>
在表格中表示整体大标题和一列小标题
标签:
标签名 | 名称 | 说明 |
---|---|---|
caption | 表格大标题 | 表示表格整体大标题,默认在表格整体顶部居中位置显示 |
th | 表头单元格 | 表示一列小标题,通常用于表格第一行,默认内部文字加粗并居中显示 |
注意:
例如:
<body>
<table border="2">
<caption>工资表caption>
<tr>
<th>员工th>
<th>工资th>
tr>
<tr>
<td>花无缺td>
<td>花有缺td>
tr>
<tr>
<td>50ktd>
<td>60ktd>
tr>
table>
body>
让表格的内容结构分组,突出表格的不同部分,使语义更清晰,利于浏览器的解析与开发人员的维护
标签 | 名称 |
---|---|
thead | 表格头部 |
tbody | 表格主体 |
tfoot | 表格底部 |
注意:
例如:
<body>
<table border="1">
<thead>
<tr>
<th>月份th>
<th>入账th>
tr>
thead>
<tbody>
<tr>
<td>一月td>
<td>200td>
tr>
<tr>
<td>五月td>
<td>80td>
tr>
tbody>
<tfoot>
<tr>
<td>三月td>
<td>180td>
tr>
tfoot>
table>
body>
将水平或垂直的多个单元格合并成一个单元格
合并单元格步骤:
属性名 | 属性值 | 说明 |
---|---|---|
rowspan | 合并单元格的个数 | 跨行合并,将多行的单元格垂直合并 |
colspan | 合并单元格的个数 | 跨列合并,将多列的单元格水平合并 |
注意:
同一个结构标签中的单元格才能合并,部门跨结构合并(不能跨thead,tbody,tfoot)
例如:
<body>
<table border="1">
<thead>
<tr>
<th colspan="3">嘿嘿th>
tr>
thead>
<tbody>
<tr>
<td>一月td>
<td>200td>
<td>14点td>
tr>
<tr>
<td>五月td>
<td>80td>
<td>4点td>
tr>
tbody>
<tfoot>
<tr>
<td>三月td>
<td>180td>
<td>5点td>
tr>
tfoot>
table>
<br>
<table border="1">
<thead>
<tr>
<th>月份th>
<th>入账th>
<th>时间th>
<th rowspan="3">性别th>
tr>
thead>
<tbody>
<tr>
<td>一月td>
<td>200td>
<td>14点td>
tr>
<tr>
<td>五月td>
<td>80td>
<td>4点td>
tr>
tbody>
<tfoot>
<tr>
<td>三月td>
<td>180td>
<td>5点td>
tr>
tfoot>
table>
body>
HTML表单用于搜集不同类型的用户输入
HTML 表单表示文档中的一个区域,此区域包含交互控件,将用户收集到的信息发送到 Web 服务器。
登录、注册、搜索、评论
from标签用来定义HTML表单
例如:
<body>
<form action="">
用户名: <input type="text" name="用户名"><br>
密码: <input type="text" name="密码">
form>
body>
form标签结合input标签可以产生各种作用的表单
input标签可以根据 type 属性值的不同,展示不同的效果
type属性
标签名 | type属性值 | 说明 |
---|---|---|
input | text | 文本框,用于输入单行文本 |
input | password | 密码框,用于输入密码 |
input | radio | 单选框,用于多选一 |
input | checkbox | 多选框,用于多选多 |
input | file | 文件选择,用于上传文件 |
input | submit | 提交按钮,用于提交 |
input | reset | 重置按钮,用于重置 |
input | button | 普通按钮,默认无功能,之后配合js添加功能 |
input | placeholder | 占位符,提示用户输入内容 |
input | name | 分组,有相同属性的单选框为一组,一组同时只能有一个被选中 |
input | checked | 默认选中 |
input | multiple | 多文件选择 |
在网页中显示不同功能的按钮表单控件
属性:
标签名 | type属性值 | 说明 |
---|---|---|
input | submit | 提交按钮,点击之后提交数据给后端服务器 |
input | reset | 重置按钮,点击之后恢复表单默认值 |
input | button | 普通按钮,默认无功能,之后配合js添加功能 |
注意:
在网页中显示用户点击的按钮
type属性值
标签名 | type属性值 | 说明 |
---|---|---|
button | submit | 提交按钮,点击之后提交数据给后端服务器 |
button | reset | 重置按钮,点击之后恢复表单默认值 |
button | button | 普通按钮,默认无功能,之后配合js添加功能 |
注意:
例如:
<body>
<form action="">
用户名: <input type="text" name="用户名" placeholder="请输入你的用户名"><br>
密码: <input type="password" name="密码" placeholder="请输入你的密码">
form>
<form action="">
上传文件:<input type="file" name="file"><br>
文件多选:<input type="file" name="file" multiple><br>
<input type="reset">
form>
<form action="">
<input type="radio" checked>男
<input type="radio">女
form>
<form action="">
<input type="checkbox">初中
<input type="checkbox">高中
<input type="checkbox" checked>大学<br>
<input type="submit">
form>
<form action="">
<input type="button">按钮
<button>按钮button>
form>
body>
Action 属性
action 属性定义在提交表单时执行的动作
向服务器提交表单的通常做法是使用提交按钮。
通常,表单会被提交到 web 服务器上的网页。
如果省略 action 属性,则 action 会被设置为当前页面。
Name 属性
如果要正确地被提交,每个输入字段必须设置一个 name 属性。
标签组成:
常见属性:
selected:下拉菜单的默认选中
例如:
<body>
<form action="">
<select name="" id="">
<option value="hh">贵阳option>
<option value="hh">昆明option>
<option value="hh">深圳option>
select>
form>
body>
在网页中提供可输入多行文本的表单控件
常见属性:
注意:
例如:
<body>
<textarea rows="10" cols="30">
我是一个文本框。
textarea>
body>
datalist 元素为 input 元素规定预定义选项列表。
用户会在他们输入数据时看到预定义选项的下拉列表。
input 元素的 list 属性必须引用 datalist 元素的 id 属性。
例如:
<body>
<form action="">
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
datalist>
form>
<body>
使用方法2:
例如:
<body>
<p>点击其中一个文本标签选中选项:p>
<form action="">
<label for="male">花无缺是帅哥label>
<input type="radio" name="sex" id="male" value="male"><br>
<label for="female">花无缺是大帅哥label>
<input type="radio" name="sex" id="female" value="female"><br><br>
<input type="submit" value="提交">
form>
body>
div标签:一行只显示一个(独占一行)
span标签:一行可以显示多个
在HTML5中,推出的一些有语义的局部标签供开发者使用
标签:
标签名 | 语义 |
---|---|
header | 网页头部 |
nav | 网页导航 |
footer | 网页底部 |
aside | 网页侧边栏 |
section | 网页区块 |
artcie | 网页文章 |
注意:
以上标签显示特点和div一致,但是比div多了不同的语义
在 HTML 中,某些字符是预留的。
在 HTML 中不能使用小于号(<)和大于号(>),这是因为浏览器会误认为它们是标签。
如果希望正确地显示预留字符,我们必须在 HTML 源代码中使用字符实体(character entities)
结构:&英文
常用字符实体
显示结果 | 描述 | 实体名称 |
---|---|---|
空格 | ||
< | 小于号 | < |
> | 大于号 | > |
& | 和号 | & |
" | 引号 | " |
’ | 撇号 | ' |
¢ | 分(cent) | ¢ |
£ | 镑(pound) | £ |
€ | 欧元(euro) | € |
¥ | 元(yen) | ¥ |
§ | 小节 | § |
© | 版权 | © |
哇塞,历时多天,终于肝完了这份2万字的HTML笔记!笔记包含了HTML的大部分知识点!第一次在CSDN上发布博客,过程还是挺艰难的,反复修改,查阅各种资料,力求完美,每一个知识点都有对应的代码示例,对新手非常的友好!看在我这么认真的份上,各位读者大大给个三连好吗?谢谢!
点赞
收藏⭐
留言
加关注✅
!!!