- A+
html (hyper text markup language)知识点
html文档结构
<!-- 文档注释 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> </body> </html> <!DOCTYPE html>html5固定语法。<!-- 文档注释 -->文档注释htmlroot标签，通常指定属性lang="en"- head body
- title 在head内的标签，指定浏览器标题
- meta 描述性标签，通常有至少有一个指定字符集UTF-8
标签类型
标签的右尖括号前可以有空格
标签也称为元素，有标签值，标签值可以是别的标签元素，可以有属性，多个属性用空格隔开，每个属性都有属性值
-
自闭合
- 如
<hr/>斜杠和右括号中间不可有空格，斜杠前可有空格。
- 如
-
双标签
- 如
<h2>标题</h2>右边的闭合标签斜杠两边都不能有空格 。 - 结构：
<标签名称 标签属性=属性值 标签属性=属性值>标签值</标签名称>
- 如
-
块元素
- 该元素独占一行 如
h, p标签
- 该元素独占一行 如
-
行内元素
- 如无换行标签，元素将排在一行，源码中换行不影响元素排列，如一些小的标签
a, strang, em ...
- 如无换行标签，元素将排在一行，源码中换行不影响元素排列，如一些小的标签
常用标签
h标题通常有h1到h6 六级标题p（part) 段落标签a(anchor) 锚标签，用于跳转，超链接br（break carriage return）换行hr（horizontal) 水平分割线换行，不能放入p标签内
常见属性
-
titlehead中的标题作为浏览器标题，其他元素的标题为鼠标悬停时显示的文本内容 -
alt（alternatively）图片等资源未加载完成时用指定文本代替显示 -
name标记元素的名称，表单提交时作为key提交，单选框用以分组，等等 -
id标记元素的ID，作为文档里引用如<label for="eleId">，等等 -
width宽度 -
height高度 -
border边界宽度，通常不使用，通过css实现 -
src（source）来源 -
href（hypertext reference） -
target指定链接打开的位置
常用特殊符号
-
由于html文档中一些字符为标记符号，这些字符作为普通字符时，需要其他表示方法
使用
&;两个符号包裹英文单词idea 编辑器中 键入and符号后ctrl+回车可进行各种符号预览
-
空格 -
>大于 (greater-than) -
<小于 (less-than) -
⪚大于 (equal or greater-than) -
⪙小于 (equal or less-than)
常规网页布局
网页布局使得文档结构清晰，可读性强，便于维护和扩展。
- header：标题头部区域的内容
- footer：标题脚部区域的内容，常见各大网站拉到最下方的区域
- section：web页中一块独立区域
- article：独立文章内容
- code：独立代码内容
- aside：相关内容或应用，常见于侧边栏
- nav（navigation）：导航类辅助内容
img 图像标签
<img src="../resources/image/1.jpg" alt="HTML学习笔记" alt="高清大图" title="提示"> 通常的属性有：
src, title, alt次要的属性有：
width, height常见的类型：
jpg, gif, jepg, png, bmp(位图)
a (anchor) 标签， 锚标签，链接标签
<a href="http://www....." target="_blank" > 实体内容 </a> -
实体内容点击即可跳转，实体内容可以是普通文本text，也可以是图片
img元素通常的属性有：
href, target, title次要的属性有：
常见的类型：
-
标记，使用井字符
#，跳转到标记语法为：链接#元素名称，href#name -
根据
href可以跳转到别的页面 -
如果跳转本页面的元素井号前面的链接地址可不填
可使用a标签标记一个位置
<a name="top">这里标记为顶部</a>点击跳转为
<a href="#top">点我跳转到顶部</a> -
功能性链接
如邮箱：
<a href="mailto:ttaolu.163.com">发送邮件给我</a>qq推广：<a href="http://wpa.qq.com/msgrd?v=3&uin=469495751&site=qq&menu=yes" target="_blank"> <img border="1" src="http://wpa.qq.com/pa?p=2:469495751:53" alt="点击这里给我发消息" title="点击这里给我发消息"/> </a>
list 列表标签 order,unordered,definition
-
有序列表
ol(order-list)-
<ol>有序列表 <li>内容1</li> <li>内容2</li> <li>内容3</li> <li>内容4</li> </ol>
-
-
无序列表
ul(unordered-list)-
<ul>无序列表 <li>内容1</li> <li>内容2</li> <li>内容3</li> <li>内容4</li> </ul>
-
-
自定义列表
dl(definition-list)-
dt（definition-list-title） -
dd（definition-list-data） -
<dl>自定义列表 <dt>列表头dt</dt> <dd>内容dd1</dd> <dd>内容dd2</dd> <dd>内容dd3</dd> <dd>内容dd4</dd> <dt>列表头dt333</dt> <dd>内容dd3331</dd> <dd>内容dd3332</dd> <dd>内容dd3333</dd> </dl>
-
table 表格
-
行 tr ： table row
-
列 td ： table data, （数据）每一行存放的数据
-
table 的属性有
title
-
td 的属性有:
rowspan: 该数据跨几行，如果跨两行，则下一行的数据从第二列开始排列（第一列位置被占用）
colspan: 数据跨几行，如果跨两列，则该行剩下的数据全部往后一格
<table border="1px" title="学生成绩表格"> <tr > <td colspan="3">学生成绩</td> </tr> <tr> <td rowspan="2">大乔</td> <td>语文</td> <td>100</td> </tr> <tr> <td>数学</td> <td>99</td> </tr> <tr> <td rowspan="2">周瑜</td> <td>语文</td> <td>89</td> </tr> <tr> <td>数学</td> <td>102</td> </tr> </table> -
| 学生成绩表 | ||
| 大乔 | 语文 | 100 |
| 数学 | 99 | |
| 周瑜 | 语文 | 89 |
| 数学 | 102 | |
audio 音频
-
常见属性：
src : 资源路径
title：悬停提示
controls ：控制台
autoplay ：自动播放
loop：循环播放
muted：静音
<audio src="../resources/media/audio/G.E.M.邓紫棋-来自天堂的魔鬼.mp3" controls autoplay loop title="邓紫棋-来自天堂的魔鬼"></audio>
video 视频
-
常见属性：参考音频
<p> <video width="500" height="300" title="花朵视频" controls autoplay> <source src="../resources/media/video/flower.mp4" type="video/mp4"> <source src="../resources/media/video/flower.mp4" type="video/ogg"> <source src="../resources/media/video/flower.mp4" type="video/webm"> <!-- 以下两个不行 --> <!-- <source src="../resources/media/video/flower.mp4" type="video/avi">--> <!-- <source src="../resources/media/video/flower.mp4" type="video/application/octet-stream">--> </video> <br> </p> <p> <video src="../resources/media/video/flower.mp4" width="500" height="300" title="花朵视频2" autoplay loop></video> <br> </p> <p> <video src="../resources/media/video/flower.mp4" width="500" height="300" title="花朵视频3" autoplay loop></video> <br> </p> -
无法播放问题：
-
windows系统设置问题-windows功能未启用或MIME类型未配置
control-程序-卸载程序-侧边栏的启动或关闭windown功能
专业版打开Windows功能：运行-OptionalFeatures
勾选两项：
Internet Information Services/Web 管理工具/IIS 管理控制台 (勾选)
Internet Information Services/万维网服务 (勾选)，该选项不用进行展开了
按下win键-输入IIS打开控制台
专业版打开IIS控制台：运行-inetmgr
双击MIME类型-检查.mp4是否有配置，如无，右侧操作栏点击添加-输入扩展名
.mp4和mime类型video/mp4其他参考命令：
本机的IIS服务重启，停止，启动: iisreset, net stop iisadmin /y, net start iisadmin
重启或者停止w3服务: net start w3svc, net stop w3svc
-
视频本身问题-由视频本身无法被浏览器解析的情况
通过各种转码软件重写视频源件
放弃该视频，更换其他视频
-
iframe 内联框架
<p> <iframe src="//player.bilibili.com/player.html?aid=804847829&bvid=BV1ay4y1V7XG&cid=387543623&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" width="900" height="600" title="B站小视频" allowfullscreen="true"></iframe> </p> <p> <iframe name="iframe2" src="https://www.bilibili.com/" width="300" height="200" frameborder="0" title="B站首页"></iframe> </p> <p> <!-- 内联框架跳转 src属性可以省略也可以为空src=""，src为其他时，点击跳转就会覆盖原iframe的内容 --> <iframe name="iframe3" width="300" height="200" frameborder="1" title="什么都没有"></iframe> <a href="https://www.cnblogs.com/ttaolu/" target="iframe3" title="博客">跳转至我的博客</a> </p> form 表单
属性
- name: 表单名称
- method: 表单提交时，表单中的元素内容以键值对置入url（get ），元素的键值对内容以data方式发送(post)
- action: 表单提交位置，提交时表单中的元素内容信息发往地址，可以是网站、请求处理地址
表单元素（标签）
-
label 元素
- for 属性：指定其他元素id
-
select 元素
- 属性：name，id，
- 包含元素：option
- option 属性有： value，selected 并可指定option 标签的值，用于提示用户该选项文本描述信息
-
textarea 元素
- 属性：name，id，value，placeholder，cols，rows
-
input 元素
-
type 属性
-
text 文本框
-
password 文本框
-
number 文本框
-
search 文本框
-
url 文本框
-
email 文本框
-
checkbox 复选框
-
radio 单选框，单选框多个元素分为一组，指定元素的name属性为相同即可，即相同name的radio元素为一组
-
submit 按钮
-
reset 按钮
-
button 按钮
-
image 按钮
-
file 文件选择按钮，
-
hidden
-
range 滑块
-
-
name 属性，表单元素key
-
id 属性，表单元素id，用于识别
-
value 属性，表单元素的值，很多元素有默认值，一个元素只有一个值，但是可以多个元素有相同的name，以达到一个key多个value
如是k1=v1&k1=v2&k1=v2，这里三个元素name都为k1，有三个值分别未v1,v2,v2
-
title 属性，悬停提示，鼠标悬停到该组件时显示的文本，常用于文本框
-
placeholder 属性，用户提示，常用于文本框，内容为空时，文本框内显示文本提示用户输入什么信息
-
maxlength 属性，文本框限制用户输入的字符个数
-
accpet 属性，可接受value的类型，
可指定后缀".png",
可指定类型"image/*",
可指定多个，用逗号分隔"image/gif,image/jpg", ".csv,.jmx"
可同时指定类型和后缀，用逗号分隔"image/*,.md"
-
required 属性，非空验证，提交时，如果该元素未被选中或为空未输入，无法进行提交，注意单选框只需指定一个元素即可，指定多个效果相同，
表示该单选框组内必须有一个元素被选中
-
patten 属性，正则验证，提交时，用正则表达式验证输入框合法性，无法进行提交
-
readonly 属性，使该元素只读，不可修改
-
disabled 属性，使该元素不可互动，如无法输入，点击等
-
hidden 属性，用于隐藏该元素
-
selected 属性，用于单选或复选框被选中，默认未选中，下拉列表框选项，默认第一项，如果指定多个都被选中，那么取最后一个
-
checked 属性，单选、复选框默认为未选中，该属性指定选中
-
multiple 属性，启用复选功能，常用组件类型为为 file
-
size 属性，初始宽度，根据类型type的不同，单位有字符char(如文本框)，像素px(如各种按钮大小)
-
rows 属性 用于多行文本框（文本域），指定文本框行数
-
cols 属性，用于文本框，
-
<h1>用户注册</h1> <form action="1.learn.html" method="get"> <label>名字：<input type="text" name="userName" title="请输入用户名" placeholder="你好啊，朋友"/></label> <br> <label>密码：<input type="password" name="passWord"/></label> <p> <input type="submit" name="signIn" value="注册B站账户"> <input type="reset" name="reset"> </p> </form> <hr> <!--登录界面2--> <h1>用户登录</h1> <form action="2.list.html" > <label>名字：<input type="text" name="userName"/></label> <br> <label>密码：<input type="password" name="passWord"/></label> <p> <input type="submit" value="登录到w3c" name="login"> <input type="reset" name="reset"> </p> </form> <hr> <h2>单选框</h2> <form name="单选框表单" method="get" action="1.learn.html"> <!-- 如果都是checked， 那么最后的将覆盖之前的，也就是只有最后一个生效。--> <p>单选框： <input type="radio" name="sex" value="male" required>男 <input type="radio" name="sex" value="female" required>女 </p> <p>单选框： <label><input type="radio" name="sex1" value="male" required >男</label> <label><input type="radio" name="sex1" value="female" required>女</label> </p> <input type="submit"> <br/> </form> <hr> <form action="1.learn.html"> <p id="gg">多选框表单: <!-- <label for="gg">game over:</label> required 属性 必须选中 --> <label><input type="checkbox" name="hobby" value="sleep">吃饭</label> <label><input type="checkbox" name="hobby" value="code">睡觉</label> <label><input type="checkbox" name="hobby" value="game">敲代码</label> <label><input type="checkbox" name="hobby" value="chat">打游戏</label> <label><input type="checkbox" name="hobby" value="chat">打游戏</label> </p> <input type="submit"> </form> <hr> <form action="1.learn.html"> <p> <label for="stat">选择国家:</label> <select name="location" id="stat"> <option value="china">中国</option> <option value="us" selected>美国</option> <option value="wai">外国</option> <option value="wai">外国</option> </select> </p> <p> <label for="textarea">说明：</label> <br> <textarea name="say" id="textarea" cols="30" rows="10" placeholder="请输入你的意见！"></textarea> </p> <p> <label for="idFile">选择你的头像</label> <input type="file" name="sFile" id="idFile" multiple accept=".png"> <input type="button" name="upload" id="idUpload" value="开始上传"> <label for="idUpload">上传</label> </p> <p><input type="submit"></p> </form> 浏览器快捷键
-
Ctrl + U查看网页源代码 （*****） -
F12显示/隐藏开发者工具 （*****） -
Ctrl + Shift + I 审查元素(opean drawer) 同上
-
Shift + F5 去缓存刷新 （
*****） -
Esc 停止加载 （
*****） -
Shift + Esc任务管理器 -
F6 选中地址栏
-
F5 刷新（重新载入）
-
Ctrl + H 显示历史记录
-
Ctrl + Shift + Del 清理上网痕迹
-
Ctrl + Click 新标签打开不跳转
-
Ctrl+Shift + Click 新标签打开并跳转
-
Alt + Click 图片 快速保持图片
Idea 编辑 html 技巧
-
tab自动完成标签，如输入h1后按一下tab
