HTML和MarkDown语法
Web标准
Web标准的构成
主要包括结构(Structure)、表现（Presentation） 和⾏为（Behavior） 三个⽅⾯
浏览器不同，他们显⽰页⾯或者排版就有些差距。
W3C（万维⽹联盟）组织和其他标准组织制定了Web标准
Web标准提出的最佳体验⽅案：结构写在HTML⽂件中、样式写在CSS件中、⾏为写到JavaScript中三者相分离
标准说明
Structure⽤于对⽹页元素进⾏整理和分类CSS⽤于设置⽹页元素的版式、颜⾊、⼤⼩等外观样式Behavior⾏为是指⽹页模型的定义及交互的编写HTML 基本语法、关系、标签
1. HTML 标签由尖括号包围的关键词，例如<html>
2. HTML标签通常成对出现
3. 有些特殊的标签必须是单个标签（极少出现），例如<br />
4. 标签关系分为两类：包含关系和并列关系
包含关系
<head>
<title> </title>
</head>
并列关系
<head> </head>
<body> </body>
HTML标签补充及语法说明
标签名定义说明
<script>定义客户端脚本，
必须的type属性规
定脚本的MIME类
型
⽤于在HTML页⾯中插⼊⼀段javascript，javascript常见应⽤于凸显操作、表单验证以及动态内容更新。script
元素可以包含脚本语句，也可以通src 指向外部脚本⽂件
<link>定义⽂档与外部资
源的关系，放在
html头部
常见⽤途连接样式表 <head> <link rel=“value” type=“text/css” href=“URL” /> </head> rel规定当前⽂档与连接
⽂档之间的关系，type规定被链接⽂档的mime类型
<a>定义锚
<a name=“ ”>name属性创建⽂
档内的书签，规定
anchor的名词
<a name=“bookmark”></a>
anchor的名词
HTML元素class
属性
value=Classname规定元素的类名<tabel>
<p>段落标签
<hr />hr元素⽤于分割内
容
<hr />标签⽤于在页⾯中创建⽔平线
<pre>定义格式化⽂本<code>定义编程代码⽰例<kbd>定义键盘⽂本<sup>指数上标
<var>定义变量
<samp>定义计算机输出⽰
列
<samp>``</samp>
<form>表单域标签form action=“URL ” method=“get/post” name=“表单名称”
<input type= >表单type元素的类
型
<input type=“text” value=“请输⼊⽤户名” name=“username”>
Value规定type属性属性值: alternate ⽂档的替代版本，⽐如镜像，翻译、打印页；stylesheet ⽂档的外部样式表；start 集合中的第⼀个⽂档；next ⽂档中的下⼀个⽂档；prev 集合中的上⼀个⽂档；index ⽂档的索引；glossary 在⽂档中使⽤的术语表；copyright 包含版权信息的⽂档；chapter 章；section 节；subsection ⽂档⼩节 ； appendix
附录；help 帮助⽂档；bookmark 相关⽂档
<select>表单下拉元素option选项
<html> </html>HTML 标签页⾯中的根标签
<head></head>⽂档的头部在head标签中必须设置的标签是title
<title></title>⽂档的标题页⾯属于⾃⼰的⽹页标题
<body></body>⽂档的主体元素包含⽂档的所有内容，页⾯内容 基本都是放在body⾥⾯的
<!DOCTYPE>⽂档类型声明标签告诉浏览器当前采取的HTML版本lang语⾔标签告诉浏览器当前⽹页所使⽤的语⾔
<meta>元标签⽤来指定⽹页的描述，关键词，⽂件最后的修改时间，作者及其他元数据。参考github charset指定字符集合规定HTML⽂档的字符编码
图⽚标签<img src=”图像URL” />
<audio>⽤于在⽂档中嵌⼊
⾳频内容
使⽤src属性或<source>元素或MediaStream进⾏描述
<h1></h1>标题标签⼀级标题，标题独占⼀⾏
<h2>…<h6>标题标签⼆级标题～六级标题，从⼤到⼩依次显⽰<p>段落标签可以把HTML⽂档分为若⼲个段落<br />换⾏标签换⾏
<strong>或<b>加粗标签⽂本格式化标签使语⽓更强烈
<em>或<i>倾斜⽂本格式化标签使强调语⽓
<del>或<s>删除线强调标签名定义说明
<ins>或<u>删除⽂本标签强调语⽓
<div>和<span>盒⼦标签，div独占⼀⾏，span跨距<alt>替换⽂本title 显⽰不出来的时候⽤⽂字替换:
<width>像素宽度设置图像/表格边框的宽度
<height>像素⾼度<img src=“img.jpeg” alt=“” title=“” width=“” height=“” border=“”> <border>像素设置图像的边框粗细
<a> </a>
超链接标签 单词
anchor的缩写，英
[/'æŋkə/] 美
[/'æŋkɚ/]
href指定链接⽬标url地址，target指定链接打开⽅式 target =_self默认值，target=_blank新窗⼝打开
<tbody>表格主体标签⽤于组合HTML表格的主体内容
<thead>表格表头标签⽤于对HTML中的表头内容进⾏分组
<tfoot>表格页脚标签⽤于对HTML表格中的表注（页脚）内容进⾏分组
<th>表格内的表头单元
格
⽂本通常为加粗的⽂字
<tr>定义表格中的⾏包含⼀个或多个<th>或<td>元素
<td>表格内的标准单元
格
通常为左对齐的⽂本
<cellpadding>内容和单元格边框
的距离
像素值，默认1像素
<cellspacing>单元格和单元格之
间的距离
像素值，默认2像素
align 定义表格⾏的内容
的对齐⽅式
值=right/left/center/justify/char
<ul>⽆序列表标签
⽆序列表，包含很多⼩li ，⾥⾯可以嵌套p标签列表没有顺序之分，带有⾃⼰的效果（⼩⿊点）
<ol>有序列表标签1. 有序列表，按顺序排列
2. ⾃带排序/排名效果通过css去掉
<li>列表标签
相当于⼀个容器，可以嵌套其他元素
<dl><dt><dd> </dd></dt></dl>⾃定义列表
通常⽤于对术语或名词进⾏解释
dt和dd是并列关系，围绕dl（⼩标题）解释说明
<iframe>创建包含另外⼀个
⽂档的内联框架
（⾏内框架）
⽂本放在iframne之间，可以应对⽆法理解iframe的浏览器
<embed>定义嵌⼊的内容 ⽐
如插件
<embed src=” ” />
<blockquot> </blockquot>定义块应⽤<p>我被引⽤了我被引⽤了</p>
标签名定义说明
<cite>定义引⽤的出处或
来源
<blockquote cite=“URL” />
<button>定义⼀个按钮事件<button type=”text”>Click Me!</button>标签名定义说明
HTML中的表格模版
<body>
<table align=“center” border=“1” cellpadding=“0” cellspacing=“0” width=“500” height=“249”>
<tr>
<th>排名</th>
<th>关键词</th>
<th>趋势</th>
<th>今⽇搜索</th>
<th>最近七⽇</th>
<th>相关链接</th>
</tr>
<tr>
<td>1</td>
<td></td>
<td><img src=“up.jpg”></td>
<td>HotSpot</td>
<td>index</td>
<td><a href=“#”>天⽓</a><a href=“#”>HotSpot</a><a href=“#”>Yahoo!</a></td>
</tr>
<tr>
<td>2</td>
<td></td>
<td ><img src=“.jpg”></td>
<td>HotSpot</td>
<td>Index</td>
<td><a href=“#”>Investorpedia</a><a href=“#”>Times</a></td>
</tr>
<tr>
<td>3</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><a href=“#”>CSDN</a><a href=“#”>iTuns</a><a href=“#”>Github</a></td>
</tr>
</table>
</body>
图像标签和路径。
1. 图像标签注意点
2. 图像标签可以有多个属性，必须写在标签名后⾯
3. 属性之间不分先后顺序，标签与属性，属性与属性之间均与空格分开
4. 属性之间采取键值对的格式，即key=“value”的格式，属性=“属性值”
图像标签⼀定要写src
图⽚不能显⽰的时候，就会把alt替换⽂本显⽰在⽹页中
title提⽰⽂本，⿏标放在图⽚上出现的提⽰信息
htmlbutton属性alt和title出现的时机不⼀样
⽬录⽂件夹和根⽬录
⽬录⽂件夹：就是普通⽂件夹，⾥⾯存放做页⾯所需的素材，⽐如html⽂件、图⽚等
根⽬录：打开⽂件夹的第⼀层就是根⽬录
路径
相对路径：以引⽤⽂件所在位置⽽参考，⽽建⽴的⽬录路径，即图⽚相对于HTML页⾯的位置
相对路径分类符号说明
同⼀级路径图像⽂件位于HTML⽂件同⼀级 如<img src=“csdnjpg.jpeg”/>
下⼀集路径/图像⽂件位于HTML下⼀级 如<img src=“image/csdn.jpg” />
上⼀级路径…/图像⽂件位于HTML⽂件上⼀级教师 如<img src=“../csdn.ipg” />
H5中HTML添加的属性
属性描述
accesskey元素快捷键
class元素的⼀个或多个类名
contentedisable元素内容是否可编辑
contextmenu元素的上下⽂菜单
data*-⽤于存储页⾯或应⽤程序的私有定制数据
dir规定元素中内容的⽂本⽅向
draggable元素时候可以被拖动
drogzone规定拖动在被拖动数据时是否要进⾏复制，移动或链接
hidden规定元素仍未或不在相关
lang规定元素内容的语⾔
spell check是否对元素进⾏拼写检查和语法检查
style元素的⾏内CSS样式
tabindex规定元素的tab次序
title元素的额外信息
translate是否应该翻译元素的内容
<iframe allow=“autoplay”; encrypted- media*; fullscreen *” frameborder=“0” height=“150” style=“width:100%; max-width:660px; overflow:hidden; backgroun d: transparent;” sandbox=”allow-forms allow-popups allow-same- origin allow-script  allow storage-access-by-user-activation allow-top-navigation-by-user-activation” src=“embed.music.apple/cn/any-man-of-mine/1520110717?i=1520110721&l=en”> </iframe>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。