HTML简单介绍

HTML简介

1.什么是html？
HTML是超文本标记语言的缩写，超文本就是指页面内可以包含图片、链接、甚至音乐、程序等非文字元素。
标记语言：–本身不具有行为能力和逻辑能力，写什么输出什么，只能被读取(只能被浏览器读取)
编译语言–先编译在执行，被解析器所执行
脚本语言–不需要编译，需要被解析器解析执行
注： 执行过程中编译语言和脚本语言可以对代码进行逻辑整理和运算。
2.三种方法
（1）本地在编辑器上编写html代码：–在本地进行测试
如： sublime、vscode、…
（2）本地浏览器运行
鼠标右键open in browser或者双击html文件
（3）部署到服务器端（远程服务器）
地址：标准url路径
url路径组成： 协议名称://ip地址:端口号/项目路径
如： 47.100.76.121:80/demo/index.html
:3306
备注：ip地址（是一个远程）如47.000.76.121
80和3306是端口号
项目路径：demo/index/html
如：47.100.76.121:80/demo/index.html->www.baidu.com
----这两个地址都可以访问百度网页，后者是域名，需要申请
1）从上到下依次解析执行的
2）宽松性/容错性
3.文档结构
后缀名 .html
.htm
快捷键：html:4t 快速生成4版本的html结构
html:5 快速生5版本的文档结构(记住)
doctype:（声明）
html:（根元素）包括两部分标签：head和body
head：（包括两个标签）meta（主要设置字符编码）和title（主要设置标签页的名称）
第三方外部引入文件（建议）—— 一般建议写入head标签中
body：所有想要展示在浏览上的内容
4.元素
1）元素的组成
开始标签 元素内容 结束标签 元素内容可能是：普通文本或者也有可能是子标签
<标签名称> </标签名称>
没有结束标签的标签分为两种：单标签/空元素
注： 标签不能交叉嵌套使用
2)元素的分类
块级元素：
特点： 独占一行空间（不与其他元素共享一行空间）
可以直接设置宽高属性
行内元素：
特点： 可以和其他元素共享一行空间
不可以直接设置宽高属性（可以间接设置）
不可以直接设置上下的外边距
行内元素不能嵌套块级元素
5.属性
1)属性设置
写在开始标签内部
和标签名称使用空格隔开
属性名key(键)和属性值value（值）之间使用等号连接
多对属性之间使用空格隔开
2)属性分类
a.根据公有性进行分类
公有属性：
所有标签都能设置的属性。例如： style:设置行内样式， 属性值必须根据css语法进行设置
私有属性：只有当前标签能使用，如：img
b.根据布尔性进行分类
普通属性：属性值为字符串，
布尔值属性： 属性值为true/false
如： key=‘key’、 key=“true”、 key=true、 key(常用)
6.语法
1)空白语法
div：hello world
pre:保留用户所输入的格式
2)字符实体：&实体名称;
3)注释
注释不会被浏览器所解析
注释的内容不会展示在页面上
作用：
提升代码的可读性
便于代码的维护和管理
注：html中的注释不可以嵌套使用
7.标签
body：8px margin 8像素的外边距
div 无意义标签，主要用来做布局
span 无意义标签，主要用来做布局
强调标签：——不经常使用，一般用css来表示样式
src——引入图片路径
d:/…/1.png
默认为当前文件所在的文件夹
alt——替换图片（当图片加载失败时，要替换）
br:换行标签
hr：水平线
size:设置水平线高度
width:水平线的宽度
align:水平线的位置
left
center
right
sub–下标
sup–上标
h1-h6：字体大小依次递减，字体样式也会依次递减
标题标签（块级标签）
a:标签----叫做超链接，(显示的是蓝色，鼠标点下去是红色，浏览完之后呈现紫色)私有属性包括两个：href和target
href:设置链接地址
1）url路径
标准url路径：如http的绝对路径
也可以是相对路径
2）锚点
通过id属性设置锚点位置
#id属性值
3）邮箱地址
mailto:邮箱地址
target:设置页面的打开方式，常用的有四个：（默认为当前页面打开）
_blank:打开新页面
_self:在当前页面中打开
_top:在顶级框架中打开
_parent:在父框架中打开
table:表格
caption:设置表格标题
thead：设置表格头部
tbody：设置表格体部
tfoot：设置表格脚部
tr：一行
td/th：一个单元格
table的私有属性：
align：
border:
cellpadding
cellspacing
width
bgcolor
td/th:
colspan 跨列数
rowspan 跨行数

列表标签：（都是块级元素）
ul:无序列表
li：子标签
ol:有序列表 ， 默认序号从1开始。
私有属性有两个：
start:number 开始的序号数
reversed:布尔属性 反转排序
子标签：li
dl：标题列表
dt:标题标签
dd：列表项
8. form：表单。客户端和服务器端发生数据交互时，需要使用表单
私有属性：
action：设置表单提交地址
target：表单打开的方式，和a：标签一样
method：设置表单提交的方式
post： 1.将数据封装在请求体中；2.安全性较高；3.提交重量级数据
get：默认。1.将数据拼接到浏览器地址栏上；2.安全性较低；3.提交轻量级数据。
enctype：设置表单提交的编码格式
子组件：
input:私有属性：
（1）type:
text:单行文本框
password：密码框
submit:提交按钮
reset：重置按钮
image：图片按钮
radio：单选框
checkbox：多选框
button：普通按钮
hidden：隐藏域
file：文件上传按钮
（2）value:
1）写在按钮标签上，代表修改按钮名称
2）写在输入框上，代表输入框的默认值
3）写在单选/多选框上，代表交互数据的value
如：
（3）name:前后台交互数据的key值(属性名)
src: type=image时才能用
alt: 图片
width
height:
checked：布尔值，默认选中，针对单选框和多选框
size:设置文本框的宽度，默认宽度20
maxlength:文本框的最大输入字符长度
readonly：只读，布尔属性
disabled:布尔属性，禁用组件
autofocus:自动聚焦，布尔属性
placeholder：提示用户输入
required：布尔属性，必填项
（4）label:关联文本和组件

fildset:用来划分区域的
legend:设置区域标题
button：按钮
type:submit、reset/button
如果button写在form标签内，type默认为submit（页面会跳转）
如果button写在form标签外，type默认为button（不会跳转）
select：下拉框
私有属性：
size：设置每次展示的项数
multiple：布尔属性，是否可以多选
disabled：
name
子组件：
option：选项
disabled：禁用组件
selected：布尔属性，默认选中项
如：
（提交之后 adress=1）
optgroup：对子组件进行分组option
label属性：设置分组标题
textarea：多行文本输入框（默认自动换行）
cols 列数
rows 行数
wrap：是否自动换行
off 不自动换行（关闭自动换行）
hard
soft