1、基本概念
HTML
超文本标记语言
H Hyper
T text （超链接 图片 视频 音频等）
M markup（标记，标签 <不是编程语言>）
L language
HTML是一个树状结构，标签间是有父子，兄弟关系的
html结构
------head
显示网页信息声明 title/meta/link/script
title是必填项
-----------title
------body
------------所有可显示内容
所有要在页面主体区域显示的内容必须写在body内
文档声明头：告诉浏览器你要用的H5标准来解释当前的HTML文档
<!DOCTYPE html>
元素分类
块级元素：默认情况下，沾满爸爸整行，可以设置宽高 如：div p ul li
内联/行内元素：元素并列在同一行，不能够设置宽高，也就是说他们的内容多少决定了标签的大小 如：a span b i
img（行内块级元素/置换元素 可以设置宽高）
HTML可以将元素分类方式分为行内元素、块状元素和行内块状元素三种。首先需要说明的是，这三者是可以互相转换的，使用display属性能够将三者任意转换：
(1)display:inline;转换为行内元素
(2)display:block;转换为块状元素
(3)display:inline-block;转换为行内块状元素
实体字符（都是以&开头；结尾的）
| 特殊字符 | 字符实体 |
|---|---|
| 大于号(>) | > |
| 小于号(<) | < |
| 引号" | " |
| ® | ® |
| © | © |
| & | & |
| 一个英文的空格 | |
| 一个汉字的空格 |   |
结构层(HTML)、表现层(CSS)、行为层(JavaScript)
样式：模样的形式（对齐方式，颜色，宽高大小）
锚点：页内跳转，在地址栏上会拼接上#targetId
“#”回到页面顶部
2、重要标签&属性
<div>块级元素
实际意义（应用场景）：它可以作为一个容器
<p>段落标签语言
<img> 图片标签:
- src属性：指定显示图片的路径
- alt属性：图片备注
- 全局属性title：鼠标移上去的提示
<a>
- href：指定超链接的目标网址（如果是线上地址，必须以HTTP开头的完整路径）
- target:指定了目标链接的打开方式
a标签绑定手机号码,发短信，发邮件，下载
<a href="#targetId">锚点测试</a>
<a href="tel:13539748339">点击请联系我</a>
<a href="sns:13539748339">点击请联系我</a>
<a href="mailto:13539748339@qq.com">点击请联系我</a>
<table>
- border 边框
- cellspacing 单元格与单元格之间的间隙
- cellspadding 内边距 内容与边框之间的距离
- tr 表示table的一行
- th/td 一个单元格
- rowspan 跨行
- colspan 跨列
<ul> <li>无序列表 <ol>有序列表
- start 开始下标
- type 指定序列号类型
- reverse 倒序
<dl><dt><dd>列表标签 标题 列表 (开头有缩进)
一些常用的行内元素
- span标签 行内元素，包裹文字
- sup 上标
- sub 下标
- b 粗体
- i 斜体
-mark 定义带记号文本 文本被加颜色背景
input属性
- placeholder 空内容时占位提示内容
- value 可以指定input的默认值
- autofocus 自动获取鼠标焦点
- autocomplete 自动提示之前提交的内容
- required 必填项,否则无法提交
- readonly 只读
- disabled 禁用
- accept 文件接收类型
- multiple 上传文件多选
- name属性：指定向后台传值的字段（后台通过这个字段来获取用户的输入）
type:number 并不是说,你只能输入数字,而是HTML会将内容尽量转为数字,
它在移动端时是非常有意义的,例如电话号码输入框(弹出数字键盘)
audio属性
- controls 显示出控制板
- autoplay 现在已经被谷歌浏览器禁用了,设置了也不会自动播放(可以设置捕获用户行为来进行播放)
- loop 循环播放
利用source解决音频兼容问题
<audio>
<source type="audio/mpeg" src="media/生日歌 - 英文童谣 英文.mp3"/>
<source type="audio/ogg" src="media/生日歌 - 英文童谣 英文.ogg"/>
</audio>
<audio src="">
你的浏览器不支持audio标签,请升级浏览器!
</audio>
<!--如果不支持audio标签,就表示为自定义标签显示文字-->
video属性
- width/heigth 设置视频宽高
- controls 显示操作台
- Preload 预加载
- muted 静音
- poster 设置海报地址
- autoplay 自动播放(目前大部分浏览器不再支持)
Mp4 WebM Ogg
MP4 = MPEG 4文件使用 H264 视频编解码器和AAC音频编解码器
WebM = WebM 文件使用 VP8 视频编解码器和 Vorbis 音频编解码器
Ogg = Ogg 文件使用 Theora 视频编解码器和 Vorbis音频编解码器
3、重要知识点
路径问题
绝对路径：表示路径的完整描述信息 D:\study\classfile\2018.12.24helloworld\img
相对路径：根据相对位置得到路径信息
/ 进入文件夹
./ 表示当前文件夹
../ 表示上一层文件夹
form标签
- method属性：指定通讯方式（常用get/post/put/delete）
form表单提交的方式get和post的区别
1.传值方式不同,get会把传递的值以URL查询字符串的形式显示在地址栏里,而post是把要传递的值放在了请求体里面,相比来说post会更安全一点,千万不要把带有密码的内容以get的方式传值.get传值多个值用&连接 用?查询字符串
2.传输数据量的大小,因为get的内容是放在地址栏的,但是地址栏能传输数据大小是有限制的,所以get方式传输数据的大小是有限制的,大约3000字符.post方式理论上说是没有大小限制的.
3.一般情况下需要从服务器获取数据是用get方式,一般向服务器发送数据时,用post的方式,
4.当需要向后台传递文件信息是必须post请求,同时在form标签修改enctype属性为multipart/form-data
其他参考资料:https://www.cnblogs.com/logsharing/p/8448446.html#!comments
https://blog.csdn.net/qq_28483283/article/details/80207674
src与href的区别
使用src的标签：img JavaScript iframe
href 超文本引用
当前元素与外链资源建立一种联系
src source资源引入
当前元素正确显示必须的资源
如果src地址写错，会影响页面显示出错，而href不会影响
meta使用
<!--设置页面编码-->
<meta charset="UTF-8">
<!--设置页面描述-->
<meta name="Description" content="这里描述网站的内容"/>
<!--设置页面关键字-->
<meta name="Keywords" content="CSS,HTML,JavaScript,前端"/>
<!--设置页面是否缓存和方式-->
<meta http-equiv="Pragma" content="no-cache" />
<!--声明作者信息-->
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<!--指定渲染引擎的类型和版本,使兼容性更好-->
<meta http-equiv="x-ua-compatible" content="IE=edge" />
<!--移动端关闭电话号码识别-->
<meta name="format-detection" content="telephone=no" />
<!--移动端关闭邮箱地址识别-->
<meta name="format-detection" content="email=no" />
<!--合二为一的写法-->
<meta name="format-detection" content="telephone=no,email=no" />
<!--解决防盗链的问题,可以播放别的网站的多媒体链接-->
<meta name="referrer" content="never"/>
<!--设置标签图标-->
<link rel="shortcut icon" type="text/css" href=""/>
网友评论