HTML
为什么要学习HTML,学习HTML可以用来做什么?<详情猛戳>
通过链接了解对html的一些简单的认识,那么先简单概述一下
HTML概念
HTML 是用来描述网页的一种语言。
- HTML 指的是超文本标记语言: HyperText Markup Language
- HTML 不是一种编程语言,而是一种标记语言
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
- HTML 文档包含了HTML 标签及文本内容
- HTML文档也叫做 web 页面
- HTML文档通过web浏览器来解析,显示所写内容
- HTML文档的后缀名一般是.html(推荐)
HTML标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
- HTML 标签是由尖括号包围的关键词,比如 <html>
- HTML 标签通常是成对出现的,比如 <b> 和 </b>
- 标签对中的第一个标签是开始标签,第二个标签是结束标签
- 开始和结束标签也被称为开放标签和闭合标签
- 有一些标签功能比较简单,使用一个标签即可,这种标签叫做自闭和标签:例如<br/>换行 <hr/> 下划线 <input /> <img />
1 |
|
HTML标签属性
- 通常是以键值对形式出现的. 例如 name="alex"
- 属性只能出现在开始标签 或 自闭和标签中.
- 属性名字全部小写. *属性值必须使用双引号或单引号包裹 例如 name="alex"
- 如果属性值和属性名完全一样.直接写属性名即可. 例如 readonly
<!DOCTYPE>标签声明
- <!DOCTYPE>声明有助于浏览器中正确显示网页。
- 网络上有很多不同的文件,如果能够正确声明HTML的版本,浏览器就能正确显示网页内容。
- doctype 声明是不区分大小写的
上述对HTML有了一些简单的认识,那么可以看一下简版html文档树形结构图(如图参考)
由图可得,根元素html分为俩部分元素head和元素body,又基于这俩部分进行一些甚至更多的拓展
又例如在IDE工具pycharm新建一个html文件,可以看到pycharm会为这个文件默认添加一些内容,即必须要有的。
接下来对head和body这俩部分进行阐释
head标签
<head> 标签用于定义文档的头部,它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
文档的头部描述了文档的各种属性和信息,包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
如图可得head标签下面有俩条内容,那么它们是什么呢?
下面这些标签可用在 head 部分(详情可点击):<base>, <link>, <meta>, <script>, <style>, 以及 <title>。
<title> 定义文档的标题,它是 head 部分中唯一必需的元素。
提示:应该把 <head> 标签放在文档的开始处,紧跟在 <html> 后面,并处于 <body> 标签或 <frameset> 标签之前。
提示:请记住始终为文档规定标题!
如题,下面代码简单阐释了下head头部信息的一些标签(当然还有其它的)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
|
body标签
所有标签统分为 块级和内联
块级标签
HTML块级通过标签<div>来定义,以上标签可以称之为块级标签
注释:<div> 是一个块级元素,也就是说,浏览器通常会在 div 元素前后放置一个换行符。
提示:请使用 <div> 元素来组合块级元素,这样就可以使用样式对它们进行格式化。
内联标签
提示:请使用 <span> 来组合行内元素,以便通过样式来格式化它们。
注释:span 没有固定的格式表现。当对它应用样式时,它才会产生视觉上的变化。
基本标签
块级标签:<p><h1><table><ol><ul><form><div>
内联标签:<a><input><img><sub><sup><textarea><span>
特殊符号有很多很多,例如 < 小于 > 大于 © 版权,更多点击
标题
HTML标题通过标签<h1>-<h6>来定义
请确保将 HTML 标题 标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。
搜索引擎使用标题为您的网页的结构和内容编制索引。
因为用户可以通过标题来快速浏览您的网页,所以用标题来呈现文档结构是很重要的。
1 2 3 4 5 6 7 8 |
|
注释: 浏览器会自动地在标题的前后添加空行。
换行
换行的方式有俩种<p>和<br>
<p>(段落换行)有俩个作用换行和隔行 定义一个段落
1 2 3 4 5 6 |
|
<br>只是单纯的换行
1 2 3 4 5 6 |
|
如图
水平线
HTML水平线通过标签<hr>来定义
1 2 3 4 |
|
注释
HTML注释通过标签<!--被注释标签-->
1 |
|
链接
HTML 链接通过标签 <a> 来定义
1 |
|
1 |
|
上面叙述的是文本超链接,也可以通过图像进行点击超链接(如题,就可以通过1.jpg这张图像可以访问到百度的主页)
1 2 3 4 5 6 7 8 |
|
<a></a>也有另外一个作用,锚的概念
例如链接到同一页面的某个位置(也可以通过一个箭头返回顶部的图像返回页面顶部)
图像
HTML 图像通过标签 <img> 来定义
1 |
|
- img 表示创建一个图片对象
- src 表示图片的路径
- width 图片的宽度
- height 图片的高度
- alt 图片没有加载成功的提示
- title 鼠标悬浮时的提示信息(当然还有其它的属性)
表单标签(form)
HTML表单通过标签<form>来定义
input,可以理解为输入属性,input属性type="如下"
- text 文本输入
- password 密文输入
- checkbox 多选框
- radio 单选框
- file 上传文件,form表单需要加上属性enctype="multipart/form-data"
- reset 重置;即所填写的内容进行清空操作
- submit 提交按钮
- button 按钮;需要配合js使用
input类型补充(以下属性被设置在input类型中)
- name: 表单提交项的键.注意和id属性的区别:name属性是和服务器通信时使用的名称;而id属性是浏览器端使用的名称,该属性主要是为了方便客户端编程,而在cssjavascript中使用的
- value: 表单提交项的值.对于不同的输入类型,value 属性的用法也不同
- checked: radio 和 checkbox 默认被选中
- readonly: 只读. text 和 password
- disabled: 对所用input都好使.
select,即下拉框
- mutiple 多选
- size 显示在页面的最大限制
- name 提交项的键 以上三个属性为select内的属性
- option下拉选中的每一项 属性:value:表单提交项的值. selected: selected下拉选默认被选中
- optgroup 为每一项加上分组
textarea,即文本编辑框
- name: 表单提交项的键. 文本框内容即为提交的值
- cols: 文本域默认有多少列
- rows: 文本域默认有多少行
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="http://127.0.0.1:8080/index" method="post" enctype="multipart/form-data"> <h1 style="color: chartreuse">欢迎加入博客园</h1> 用户 <input type="text" placeholder="手机号/邮箱/用户名"><br><br> 密码 <input type="password" placeholder="密码"><br><br> 喜好 音乐<input type="checkbox"> 电影<input type="checkbox"><br><br> 性别 男<input type="radio" name="sex" value="boy"> 女<input type="radio" name="sex" value="girl"> <p><input type="file" name="filename"></p> <input type="button" value="注册"> <input type="submit" value="注册"> <input type="reset" value="重置"><br><br> 山西省 <select name="sx" id="" size="1" multiple> <optgroup label="山西省"> <option value="jc">晋城</option> <option value="ll">吕梁</option> <option value="dt">大同</option> <option value="ty">太原</option> <option value="cz">长治</option> <option value="jz">晋中</option> <option value="yc">运城</option> <option value="gp">高平</option> </optgroup> </select> 个人简历 <textarea name="desc" cols="30" rows="10">个人简历</textarea> </form> </body> </html>
HTML
为什么要学习HTML,学习HTML可以用来做什么?<详情猛戳>
通过链接了解对html的一些简单的认识,那么先简单概述一下
HTML概念
HTML 是用来描述网页的一种语言。
- HTML 指的是超文本标记语言: HyperText Markup Language
- HTML 不是一种编程语言,而是一种标记语言
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
- HTML 文档包含了HTML 标签及文本内容
- HTML文档也叫做 web 页面
- HTML文档通过web浏览器来解析,显示所写内容
- HTML文档的后缀名一般是.html(推荐)
HTML标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
- HTML 标签是由尖括号包围的关键词,比如 <html>
- HTML 标签通常是成对出现的,比如 <b> 和 </b>
- 标签对中的第一个标签是开始标签,第二个标签是结束标签
- 开始和结束标签也被称为开放标签和闭合标签
- 有一些标签功能比较简单,使用一个标签即可,这种标签叫做自闭和标签:例如<br/>换行 <hr/> 下划线 <input /> <img />
1 |
|
HTML标签属性
- 通常是以键值对形式出现的. 例如 name="alex"
- 属性只能出现在开始标签 或 自闭和标签中.
- 属性名字全部小写. *属性值必须使用双引号或单引号包裹 例如 name="alex"
- 如果属性值和属性名完全一样.直接写属性名即可. 例如 readonly
<!DOCTYPE>标签声明
- <!DOCTYPE>声明有助于浏览器中正确显示网页。
- 网络上有很多不同的文件,如果能够正确声明HTML的版本,浏览器就能正确显示网页内容。
- doctype 声明是不区分大小写的
上述对HTML有了一些简单的认识,那么可以看一下简版html文档树形结构图(如图参考)
由图可得,根元素html分为俩部分元素head和元素body,又基于这俩部分进行一些甚至更多的拓展
又例如在IDE工具pycharm新建一个html文件,可以看到pycharm会为这个文件默认添加一些内容,即必须要有的。
接下来对head和body这俩部分进行阐释
head标签
<head> 标签用于定义文档的头部,它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
文档的头部描述了文档的各种属性和信息,包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
如图可得head标签下面有俩条内容,那么它们是什么呢?
下面这些标签可用在 head 部分(详情可点击):<base>, <link>, <meta>, <script>, <style>, 以及 <title>。
<title> 定义文档的标题,它是 head 部分中唯一必需的元素。
提示:应该把 <head> 标签放在文档的开始处,紧跟在 <html> 后面,并处于 <body> 标签或 <frameset> 标签之前。
提示:请记住始终为文档规定标题!
如题,下面代码简单阐释了下head头部信息的一些标签(当然还有其它的)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
|
body标签
所有标签统分为 块级和内联
块级标签
HTML块级通过标签<div>来定义,以上标签可以称之为块级标签
注释:<div> 是一个块级元素,也就是说,浏览器通常会在 div 元素前后放置一个换行符。
提示:请使用 <div> 元素来组合块级元素,这样就可以使用样式对它们进行格式化。
内联标签
提示:请使用 <span> 来组合行内元素,以便通过样式来格式化它们。
注释:span 没有固定的格式表现。当对它应用样式时,它才会产生视觉上的变化。
基本标签
块级标签:<p><h1><table><ol><ul><form><div>
内联标签:<a><input><img><sub><sup><textarea><span>
特殊符号有很多很多,例如 < 小于 > 大于 © 版权,更多点击
标题
HTML标题通过标签<h1>-<h6>来定义
请确保将 HTML 标题 标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。
搜索引擎使用标题为您的网页的结构和内容编制索引。
因为用户可以通过标题来快速浏览您的网页,所以用标题来呈现文档结构是很重要的。
1 2 3 4 5 6 7 8 |
|
注释: 浏览器会自动地在标题的前后添加空行。
换行
换行的方式有俩种<p>和<br>
<p>(段落换行)有俩个作用换行和隔行 定义一个段落
1 2 3 4 5 6 |
|
<br>只是单纯的换行
1 2 3 4 5 6 |
|
如图
水平线
HTML水平线通过标签<hr>来定义
1 2 3 4 |
|
注释
HTML注释通过标签<!--被注释标签-->
1 |
|
链接
HTML 链接通过标签 <a> 来定义
1 |
|
1 |
|
上面叙述的是文本超链接,也可以通过图像进行点击超链接(如题,就可以通过1.jpg这张图像可以访问到百度的主页)
1 2 3 4 5 6 7 8 |
|
<a></a>也有另外一个作用,锚的概念
例如链接到同一页面的某个位置(也可以通过一个箭头返回顶部的图像返回页面顶部)
图像
HTML 图像通过标签 <img> 来定义
1 |
|
- img 表示创建一个图片对象
- src 表示图片的路径
- width 图片的宽度
- height 图片的高度
- alt 图片没有加载成功的提示
- title 鼠标悬浮时的提示信息(当然还有其它的属性)
表单标签(form)
HTML表单通过标签<form>来定义
input,可以理解为输入属性,input属性type="如下"
- text 文本输入
- password 密文输入
- checkbox 多选框
- radio 单选框
- file 上传文件,form表单需要加上属性enctype="multipart/form-data"
- reset 重置;即所填写的内容进行清空操作
- submit 提交按钮
- button 按钮;需要配合js使用
input类型补充(以下属性被设置在input类型中)
- name: 表单提交项的键.注意和id属性的区别:name属性是和服务器通信时使用的名称;而id属性是浏览器端使用的名称,该属性主要是为了方便客户端编程,而在cssjavascript中使用的
- value: 表单提交项的值.对于不同的输入类型,value 属性的用法也不同
- checked: radio 和 checkbox 默认被选中
- readonly: 只读. text 和 password
- disabled: 对所用input都好使.
select,即下拉框
- mutiple 多选
- size 显示在页面的最大限制
- name 提交项的键 以上三个属性为select内的属性
- option下拉选中的每一项 属性:value:表单提交项的值. selected: selected下拉选默认被选中
- optgroup 为每一项加上分组
textarea,即文本编辑框
- name: 表单提交项的键. 文本框内容即为提交的值
- cols: 文本域默认有多少列
- rows: 文本域默认有多少行
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="http://127.0.0.1:8080/index" method="post" enctype="multipart/form-data"> <h1 style="color: chartreuse">欢迎加入博客园</h1> 用户 <input type="text" placeholder="手机号/邮箱/用户名"><br><br> 密码 <input type="password" placeholder="密码"><br><br> 喜好 音乐<input type="checkbox"> 电影<input type="checkbox"><br><br> 性别 男<input type="radio" name="sex" value="boy"> 女<input type="radio" name="sex" value="girl"> <p><input type="file" name="filename"></p> <input type="button" value="注册"> <input type="submit" value="注册"> <input type="reset" value="重置"><br><br> 山西省 <select name="sx" id="" size="1" multiple> <optgroup label="山西省"> <option value="jc">晋城</option> <option value="ll">吕梁</option> <option value="dt">大同</option> <option value="ty">太原</option> <option value="cz">长治</option> <option value="jz">晋中</option> <option value="yc">运城</option> <option value="gp">高平</option> </optgroup> </select> 个人简历 <textarea name="desc" cols="30" rows="10">个人简历</textarea> </form> </body> </html>
原文地址:https://www.cnblogs.com/Miracle-boy/p/9968575.html