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固定语法。
- <!-- 文档注释 --> 文档注释
- html root标签,通常指定属性 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标签内
常见属性
-
title head中的标题作为浏览器标题,其他元素的标题为鼠标悬停时显示的文本内容
-
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=\"高清大图\" 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>
-
<ol>有序列表
-
无序列表 ul (unordered-list)
-
<ul>无序列表
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
<li>内容4</li>
</ul>
-
<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 标签的值,用于提示用户该选项文本描述信息
-
datalist 元素,选项列表
- 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
html 名词
元素HTML 文档由 HTML 元素定义
- 元素name 推荐使用小写
- 开始标签/起始标签(opening tag)
- 结束标签/闭合标签(closing tag)
- 元素内容(content)是开始标签与结束标签之间的内容,某些 HTML 元素具有空内容(empty content)
- 空元素在开始标签中进行关闭(以开始标签的结束而结束)
- 大多数 HTML 元素可拥有属性
- 大多数 HTML 元素可以嵌套(HTML 元素可以包含其他 HTML 元素)
常用元素(标签)
浏览器会自动地在标题的前后添加空行
可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>
浏览器会自动地在段落的前后添加空行
来描述HTML文档的描述,关键词,作者,字符集等
定义关键词:<meta name=\"keywords\" content=\"HTML, CSS, XML, XHTML, JavaScript\">
定义描述内容: <meta name=\"description\" content=\"免费 Web & 编程 教程\">
定义网页作者: <meta name=\"author\" content=\"Runoob\">
每30秒钟刷新当前页面: <meta http-equiv=\"refresh\" content=\"30\">
常用标签二
<b> 与<i> 定义粗体或斜体文本
<strong> 或者 <em>意味着你要呈现的文本是重要的,所以要突出显示。
表格关键字
table,caption,th,tr,td,colspan,rowspan,colgroup,col,thead,tfoot,tbody
列表关键字
ul,li,ol,type,dl,dt,dd,start,
表单
form,fieldset,legend,optgroup,datalist,keygen,output
HTML 属性
属性是 HTML 元素提供的附加信息
例如:name=\'John \"ShotGun\" Nelson\'
常用属性
来源:https://www.cnblogs.com/ttaolu/p/15172232.html
图文来源于网络,如有侵权请联系删除。