https://www.bilibili.com/video/av15241731
html(Hyper Text Markup Language): 超文本标签语言
HTML 标签关系:
1. 嵌套关系
2. 并列关系
Sublime 快捷键: html:5+Tab 或者!+Tab 可以生成如下模板:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Document</title>
- </head>
- <body>
- </body>
- </html>
- ===============================================================================================================
- <!DOCTYPE html > 这句是告诉我们使用哪个 html 版本.
- <!DOCTYPE > 标签位于文档的最前面, 用于向浏览器说明当前文档使用哪种 HTML 或 XHTML 标准规范. 必须在开头处使用<!DOCTYPE>
- 标签为所有的 XHTML 文档指定 XHTML 版本和类型, 只有这样浏览器才能按指定的文档类型进行解析.
- 注意: 一些老网站可能用的还是老版本的文档类型比如 XHTML 之类, 但我们学习的是 HTML5, 而且 HTML5 的文档类型兼容性很好(向下兼容原则),
- 所以大家放心的使用 HTML5 的文档类型就好了.
- <meta charset="UTF-8">用于定义字符集.
- UTF-8 是目前最常用的字符集编码方式, 常用的字符集编码方式还有 gbk 和 gb2312
- gb2312: 简单中文, 包括 6763 个汉字
- BIG5: 繁体中文, 港澳台使用
- GBK: 包含全部中文字符集, 是 GB2312 的扩展, 加入对繁体的支持, 兼容 GB2312
- UTF-8: 包含全世界所有国家需要用到的字符, 万国码的一种.
- HTML 标签:
- 1. 排版标签:
- 排版标签主要和 CSS 搭配使用, 显示网页结构的标签, 是网页布局最常用的标签.
- 2. 标题标签:
- 为了使网页更具有语义化, 我们经常会在页面中用到标题标签, HTML 提供了 6 个等级的标题标签, 即: h1-h6.
- h1 标签因为重要, 要尽量少用.
- 3. 段落标签:<p > 文本内容</p>, 单词缩写: paragraph
- 段落标签是 HTML 文档中最常见的标签, 默认情况下, 文本在一个段落中会根据浏览器窗口的大小自动换行.
- 4. 水平线标签 < hr />, 单词缩写 horizontal, 这是一个单标签.
- 用于在网页中将段落与段落隔开, 使文档结构清晰.
- 5. 换行标签 < br />, 单词缩写: break
- 在 HTML 中, 一个锻落中的文字会从左到右依次排列, 直到浏览器窗口的右端, 然后自动换行. 如果希望某段文字强制换行, 就需要使用该标签.
- 6.div span 标签
- div,span 是没有语义的, 是我们网页布局主要的 2 个盒子.
- div 就是 division 的缩写, 分割, 分区的意思, 其实是很多 div 来组合网页.
- span, 跨度, 跨距, 范围
- 语法格式:<div > 这是头部</div><span > 今日价格</span>
- 7. 文本格式化标签
- 在网页中, 有时需要为文字设置粗体, 斜体或下划线效果, 这里就需要用到 HTML 中的文本格式化标记, 使文字以特殊的方式显示.
- <b></b>,<strong></strong>: 文字以粗体方式显示(XHTML 推荐使用 strong)
- <i></i > 和 < em></em>: 文字以斜体方式显示(XHTML 推荐使用 em)
- <s></s > 和 < del></del>: 文字以加删除线方式显示(XHTML 推荐使用 del)
- <u></u > 和 < ins></ins>: 文字以加下划线方式显示(XHTML 推荐使用 u)
- <b>,<s>,<u > 只使用, 没有强调的意思
- <strong>,<em>,<del>,<ins > 语义更加强烈.
- 标签属性:
- HTML 属性基本语法格式如下:
- <标签名 属性 1="属性值 1" 属性 2="属性值 2"...>内容</ 标签名>
- 在上面的语法中:
- 1. 标签可以拥有多个属性, 必须写在开始标签中, 位于标签名后面.
- 2. 属性之间不分先后顺序, 标签名与属性, 属性与属性之间均以空格分开.
- 3. 任何标签的属性都有默认值, 省略该属性则取默认值.
- 图像标签 img(重点)
- 单词缩写: image
- HTML 网页中任何元素的实现都要依靠 HTML 标签, 要想在网页中显示图像就需要使用图像标签. 其基本语法格式如下:
- 该语法中 src 属性用于指定图像文件的路径和文件名, 他是 img 标签的必需属性.
- <img src="图像 url" />
- <img />标签的属性
- scr-->url-->图像的路径
- alt-->文本 -->图像不能显示时的替换文本
- title-->文本 -->鼠标悬念时显示的内容
- width-->像素 (XHTML 不支持 % 页面百分比)--> 设置图像的宽度
- height-->像素 (XHTML 不支持 % 页面百分比)--> 设置图像的高度
- 图片会根据宽或高等比缩放, 要保持图像原比例只需设置一个宽属性或一个高属性.
- border-->数字 -->设置图像边框的宽度
- 链接标签(重点)
- 单词缩写: anchor, 锚
- 在 HTML 中创建超链接非常简单, 只需要用标签环绕需要被链接的对象即可, 语法如下:
- <a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
- href, 用于指定链接目标的 Url, 当为标签应用 href 属性时, 它就具有了超链接的功能. href 是 Hypertext Reference 的缩写, 意思是超文本引用
- 其中的 target 属性, 用于指定链接页面的打开方式, 其取值有_self 和_blank 两种, 其中 self 为默认值, blank 为在新窗口中打开方式.
- 注意:
- 1. 外部链接需要添加 http://www.baidu.com
- 2. 内部链接 直接链接内部页面名称即可, 比如 <a herf="index.html">页面</a>
- 3. 如果当时没有确定链接目标是, 通常将链接标签的 href 属性值定义为 "#", 表示链接暂时为一个空链接.
- 4. 不仅可以创建文本超链接, 在网页中各种网页元素, 如图像, 表格, 音频, 视频都可以添加超链接.
- 锚点定位(难点)
- 通过创建锚点链接, 用户能够快速定位到目标内容
- 创建锚点链接为分两步:
- 1. 使用 < a href="#id 名">链接文本</a > 来创建链接文本
- 2. 使用相应的 id 名标注跳转目标的位置
- base 标签
- base 标签是个单标签, 可以设置整体链接的打开状态.
- 示例:<base target="_blank" />
- 特殊字符标签
- " "-->空格 -->
- "<"-->小于号 --><
- ">"-->大于号 -->>
- "&"-->和号 -->&
- ""-->人民币 -->¥
- "?"-->版权 -->©
- "?"-->注册商标 -->®
- ""-->摄氏度 -->°
- "+-"-->正负号 -->&plusms;
- "*"-->乘号 -->×
- "/"-->除号 -->÷
- "2"-->平方 -->²
- "3"-->立方 -->³
- 注释标签:
- <!-- 注释语句 -->
- {# 注释语句 #}
- 路径(重点)
- 相对路径:
- 1. 图像文件和 HTML 文件位于同一文件夹, 只输入图像文件的名称即可, 如 < img src="logo.gif" />
- 2. 图像文件位于 HTML 文件的下一级文件夹, 输入文件夹名和文件名, 之间用 "/" 隔开, 如 < img src="img/img01/logo.gif" />
- 3. 图像文件位于 HTML 文件的上一级文件夹, 在文件名之前输入 "../", 如果是上两级, 输入 "../../", 以此类推, 如<<img src="../logo.gif" />
- 绝对路径(尽量不要用, 移值性差)
- 文件绝对路径示例: C:\Users\allen\Desktop\logo.gif
- 网页绝对路径: http://www.baidu.com
- 列表
- 无序列表 ul(重点), 格式如下:
- ul 里只能嵌套 li 标签, 直接在 ul 标签中输入其他标签或者文字的做法是不被允许的.
- li 标签相当于一个容器, 可以容纳所有元素
- 无序列表会带有自己样式的属性, 要改变其默认属性可以通过 css 进行.
- <ul>
- <li > 列表项 1</li>
- <li > 列表项 2</li>
- <li > 列表项 3</li>
- ...
- </ul>
- 有序列表 ol(重点), 格式如下:
- <ol>
- <li></li>
- <li></li>
- <li></li>
- </ol>
- ol 标签与 ul 标签特性基本相当. 但尽量多用 ul 少用 ol.
- 自定义列表(理解)
- 定义列表通常用于对术语或名词进行解释和描述, 定义列表的列表项前没有任何项目符号, 基本语法如下:
- <dl>
- <dt > 名词 1</dt>
- <dd > 名词 1 解释 1</dd>
- <dd > 名词 2 解释 2</dd>
- ...
- <dt > 名词 2</dt>
- <dd > 名词 2 解释 1</dd>
- <dd > 名词 2 解释 2</dd>
- ...
- </dl>
- 表格 table(会使用), 使用例子: http://finance.sina.com.cn/stock/ 中的板块行情, 示例如下:
- <table>
- <caption>table title and/or explanatory text</caption>
- <thead>
- <tr>
- <th>header</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>data</td>
- </tr>
- </tbody>
- </table>
- 注: tr 标签里面只能放 td 标签, td 标签相当于一个容器, 可以任何标签.
- 表格属性:
- border-->设置表格的边框 (默认 border="0" 无边框)--> 像素值
- cellspacing-->设置单元格与单元格边框之间的空白间距 -->像素值, 默认为 2 个像素
- cellpadding-->设置单元格内容与单元格边框之间的空白间距 -->像素值, 默认为 1 个像素
- width-->宽度
- height-->高度
- align-->设置表格在网页中的水平对齐方式 -->left,center,right
- 表头标签
- 表头一般位于表格的第一行或第一列, 其文本加粗居中. 设置表头只需用表头标签 < th></th > 替代相应的单元格标签 < td></td > 即可.
- 表格标题: caption
- caption 标签必须紧随 table 标签之后, 只能对每个表格定义一个标题. 通常这个标题会被居中于表格之上.
- 合并单元格
- 跨行合并: rowspan, 跨列合并: colspan
- 合并单元格的思想:
- 将多个内容合并的时候, 就会有多余的东西, 把它删除.
- 合并的顺序: 先上, 先左
- 总结表格:
- 1. 表格提供了 HTML 中定义表格式数据的方法.
- 2. 表格中由行中的单元格组成.
- 3. 表格中没有列元素, 列的个数取决于行的单元格个数.
- 4. 表格外观最好通过 CSS 设定.
- 表单控件:
- 包含了具体的表单功能项, 如单行文本输入框, 密码输入框, 复选框, 提交按钮, 重置按钮等.
- 提示信息:
- 一个表单中通常还需要包含一些说明性的文字, 提示用户进行填写操作.
- 表单域:
- 相当于一个容器, 用来容纳所有的表单控牛和提示信息, 可以通过他定义处理表单数据所用程序的 Url 地址, 以及数据提交到服务器的方法.
- 如果不定义表单域, 表单中的数据就无法传送到后台服务器.
- input 控件(重点)
- 在上面的语法中,<input />标签为单标签, type 属性为其最基本的属性, 其取值有多种, 用于指定不同控件类型. 除了 type 属性之外,
- input 标签还可以定义很多其他的属性, 其常用属性如下:
- type-->text-->单行文本输入框
- type-->password-->密码输入框
- type-->radio-->单选按钮
- type-->checkbox-->复选框
- type-->button-->普通按钮
- type-->submit-->提交按键
- type-->reset-->重置按键
- type-->image-->图像提交按键
- type-->file-->文件域
- name-->由用户定义 -->控件名称
- value-->由用户定义 -->input 控件中的默认文本值
- size-->正整数 -->input 控件在页面中显示的宽度
- checked-->checked-->定义选择控件默认被选中的项
- maxlength-->正整数 -->控件允许输入的最多字符数, 可用于限制账号长度和密码长度.
- 其中图像按钮为:<<input type="image" src="im.jpg" />
- label 标签(理解)
- label 标签为 input 元素定义标注(标签).
- 作用: 用于绑定一个表单元素, 当点击 label 标签的时候, 被的绑定的表单元素就会获得输入焦点.
- 1. 直接用 label 标签进行包裹:
- <label><input type="text" name="hobby" value="01"></label>
- 2.for 属性规定 label 与哪个表单元素绑定:
- <label for="male">Male</label>
- <input type="radio" name="sex" id="male" value="male">
- 文本域标签: 格式如下:
- <textarea cols="每行中的字符数" rows="显示的行数">
- 文本内容
- </textarea>
- 下拉菜单:
- 使用 select 控件定义下拉菜单的基本语法格式如下:
- <select name="">
- <option value="">选项 1</option>
- <option value="">选项 2</option>
- <option value="">选项 3</option>
- ...
- </select>
- select 标签中至少应当包含一个 option 标签
- 在 option 中定义 selected="selected" 时, 当前项即为默认选中项.
- 表单域
- 在 HTML 中, form 标签被用于定义表单域, 即创建一个表单, 以实现用户信息的收集与传递. form 中所有内容都会被提交至服务器.
- 创建表单的基本语法格式如下:
- <form action="url 地址" method="提交方式" name="表单名字" accept-charset="utf-8">
- 各种表单控件
- </form>
- 1.action: 在表单收集到信息后, 需要将信息传递给服务器进行处理. action 属性用于指定接收并处理表单数据的服务器程序的 Url 地址.
- 文档类设定:
- document:
- HTML:sublime 输入 html:4s
- XHTML:sublime 输入 html:xt
- HTML5 sublime 输入 <!DOCTYPE html> 或!+Tab
- 字符设定:
- <meta http-equiv="charset" content="utf-8"> HTML 与 XHTML 中建议这样去写
- <meta charset="utf-8"> HTML5 的标签中建议这样去写
- 常用新标签:
- w3c 手册中文官网: http://w3school.com.cn/
- header: 定义文档的页眉.
- nav: 定义导航链接的部分.
- footer: 定义文档或节的页脚
- article: 标签规定独立的自包含内容
- section: 定义文档中的节(section, 区段)
- aside: 定义所外内容之外的内容
- datalist: 标签定义选项列表, 请与 input 元素配合使用该元素, datalist 示例如下:
- <input type="text" value="输入明星" list="star">
- <datalist id="star">
- <option > 张学友</option>
- <option > 刘德华</option>
- <option > 周杰伦</option>
- <option > 谢霆锋</option>
- </datalist>
- fieldset: 元素将表单内的相关元素分组, 打包, 和 legend 搭配使用. fieldset 示例:
- <fieldset>
- <legend > 用户登录</legend>
- 用户名:<input type="text"><br /><br />
- 密 码:<input type="password">
- </fieldset>
- 常用新属性:
- placeholder--><input type="text" placeholder="请输入用户名"> 占位符, 显示自己设置的提示信息
- autofocus--><input type="text" autofocus=""> 规定当页面加载时 input 元素应该自动获得焦点
- multiple--><input type="file" multiple> 多文件上传
- autocomplete--><input type="text" autocomplete="off"> 规定表单是否应当启用自动完成 (补全) 功能, 需要与 submit 结合, 且这个表单需要有 name 属性才有效
- required--><input type="text" required=""> 表示必填项
- accesskey--><input type="text" accesskey="s"> 规定激活 (使元素获得焦点) 元素的快捷键
- 示例: 昵称:<input type="text" required accesskey="s">, 意味着不管光标在哪里, 只要按住 alt+s 就可以把光标定位到该元素
- 新增的 input type 属性值:
- email--><input type="email"> 输入邮箱格式
- tel--><input type="tel"> 输入手机号码格式
- url--><input type="url"> 输入 url 格式
- number--><input type="number"> 输入数字格式
- search--><input type="search"> 搜索框
- range--><input type="range"> 自由拖动滑块
- time--><input type="time"> 小时分钟
- date--><input type="date"> 年月日
- datetime--><input type="datetime"> 时间
- month--><input type="month"> 年月
- week--><input type="week"> 星期 年
- color--><input type="color" /> 颜色
- 示例:
- <form action=""accept-charset="utf-8"> <!-- 下列标签必须结合 form 使用 -->
- 邮箱:<input type="email" /> <!-- 只能是邮箱格式 -->
- 手机:<input type="tel" /> <!-- 在 PC 端上不明显 -->
- 数字:<input type="number" /> <!-- 不能输入数字外的字符 -->
- url:<input type="url" /> <!-- 必须输入网址 -->
- 搜索:<input type="search" />
- 区域:<input type="range" />
- 时间:<input type="time" />
- 年月日:<input type="date" />
- 年月:<input type="month" />
- 星期:<input type="week" />
- datetime:<input type="datetime" />
- 颜色:<input type="color" />
- <input type="submit" />
- </form>
- 多媒体标签:
- embed: 标签定义嵌入的内容
- audio: 播放音频
- video: 播放视频
- 多媒体 embed(会使用)
- embed 可以用来插入各种多媒体, 格式可以是 Midl,Wav,AIFF,AU,MP3 等等, url 为音频或视频文件及其路径,
- 可以是相对路径或绝对路径.
- <embed src="视频地址" allowfullScreen="true" quality="heigh" width="480" height="400" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>
- 多媒体 audio
- HTML5 通过 < audio > 标签来解决音频播放的问题, 示例如下:
- <audio src="./music/See You Again.mp3"></audio>
- 并且可以通过附加属性可以更加友好地控制音频的播放:
- autoplay: 自动播放
- controls: 是否显示不默认播放控件
- loop: 循环播放
- 示例:
- 我们的视频支持 ogg, mp4, webM 三种视频格式
- <video autoplay controls>
- <source src="/media/video.oga">
- <source src="/media/video.m4v">
- <object type="video/ogg" data="/media/video.oga" width="320" height="240">
- <param name="src" value="/media/video.oga">
- <param name="autoplay" value="false">
- <param name="autoStart" value="0">
- <p><a href="/media/video.oga">Download this video file.</a></p>
- </object>
- </video>
- 单标签: input,br,hr,img,base
- html 的每一个标签都共有的属性有'id','class','style'
- Python 全栈 前端学习笔记
- 标签: charset 绝对路径 cell aid nav alt+ 播放视频 -c box
- 原文: https://www.cnblogs.com/fengbo1113/p/9315674.html
来源: http://www.bubuko.com/infodetail-2687053.html