HTML基础语法

优优子

HTML特性：

1.空白折叠现象

1.文字间折为一个空格

1. <p>hello     world!</p>

复制代码

2.标签内壁空白忽略

1. <p>      hello world!      </p>

复制代码

2.转义字符

1. <p>小于号<</p>
2. <p>大于号></p>
3. <p>空格 </p>
4. <p>版权号©</p>
5. 我们今天学习了<p></p>标签

复制代码

3.注释

1. [/code]vscode 快捷键 CTRL + /
2. [size=5]4.基础标签[/size]
4. DTD文档类型声明，head里是网页配置，body中是网页内容
5. ***meta元标签（单标签），网页的基础配置，name属性非常关键，里面可设置网页的搜索关键词Keywords，网页描述Description,是SEO的重要手段。
6. title标签栏内容，搜索引擎收录的标题
7. 1.分隔符div:将相关内容组合以便和其他内容分割。
8. 2.标题标签h1~6:从强到弱，其中h1最为重要(搜索引擎较为看重)，一般网页只能放一个，不推荐多个。
9. 3.段落标签p:html换行时页面效果不会换行，因此需将段落放入p标签中，p标签中不能含有其他p标签或者h系列标签。
10. [align=center][/align]
11. [size=5]5.列表标签[/size]
13. [size=4]1.无序列表[/size]
15. 无序列表unordered list；配合li标签(list item列表项)使用
16. 无序列表是一个父子组合标签，不能单独出现
17. ul是父标签，li是子标签,li标签不能散放，只能是是ul或者ol的子标签
18. ul子标签只能是li,不能出现其它标签。li中可以出现其它标签
19. [size=3]列表嵌套[/size]
21. [code]<ul>
22.     <li>
23.         <h3>江苏省</h3>
24.         <ul>
25.             <li>南京</li>
26.             <li>无锡</li>
27.             <li>苏州</li>
28.         </ul>
29.     </li>
30.     <li>
31.         <h3>湖北省</h3>
32.         <ul>
33.             <li>武汉</li>
34.             <li>黄石</li>
35.         </ul>
36.     </li>
37. </ul>

复制代码

2.有序列表

语法基本同ul标签类似，不同的是前方变为编号
了解type属性和start属性，html5被废弃，可用css
type为编号样式a,A,i,I,1 ；start是编号起始数字，必须为阿拉伯数字
reversed属性，倒序，只需写单词即可

1. <h1>考试排名</h1>
2. <ol type="1" start="5" reversed>
3.     <li>张三</li>
4.     <li>李四</li>
5.     <li>王二</li>
6. </ol>

复制代码

3.定义列表

解释说明
definition list定义列表；data term数据项；data definition数据定义；

1. <h1>前端主要技术简介</h1>
2. <dl>
3.     <dt>HTML</dt>
4.     <dd>超文本标记语言</dd>
5.     <dt>CSS</dt>
6.     <dd>层叠样式表</dd>
7.     <dt>JavaScript</dt>
8.     <dd>JS脚本程序</dd>
9. </dl>

复制代码

6.多媒体标签和语义化标签

1.图片

一般图片放入到项目文件夹中的images子文件夹中
alt属性是对图形文本的描述，图片无法加载时会显示的备用文本，也可供视力不方便的朋友使用网页朗读器
width height单位是像素，省略其中的一个属性按原始比例缩放图片

.png比较常见
图片插入路径：
1.相对路径
当前目录起始，../ 表示回退一级目录
2.绝对路径
精准的不以当前网页位置为主，可用网址或电脑目录如E:\images
2.超级链接

1.普通链接

用于网页的跳转
href支持相对路径和绝对路径
title属性:设置鼠标的悬停文本
target:在新标签页中打开网页
可用a标签包裹图片标签实现点击图片链接
首页链接
2.页面内锚点

较长页面时适当给标签添加id属性，它将成为页面的锚点
无锡


在网址后添加#号，页面将自动滚动到锚点所在位置
lvyou.html#wuxi

1. <a target="_blank" href="https://www.cnblogs.com/#top">回到顶部</a>

复制代码

3.下载链接

当指向exe/zip/rar等文件时将自动你成为下载链接

1. <a target="_blank" href="https://www.cnblogs.com/test.7z">下载</a>

复制代码

4.邮件链接、电话链接

1. <a href="https://www.cnblogs.com/mailto:2542691072@qq.com" target="_blank">我的邮箱</a>
2. <a target="_blank" href="https://www.cnblogs.com/tel:12306">高铁</a>

复制代码

我的邮箱  高铁
3.音频和视频

常用格式MP3和ogg
controls属性：显示播放控件
src:音频地址
autoplay自动播放
loop循环播放

1. <audio controls src="music/Taylor Swift - Love Story.flac">抱歉，您的浏览器不支持当前文件，请升级浏览器</audio>
2. <video src="music/国王与乞丐.mp4" controls width="500"></video>

复制代码

4.区块标签

HTML5推出众多新的区块标签

5.语义化标签

span标签是文本中的“区块”标签，本身没有特殊显示效果，结合CSS有丰富样式
b,u,i标签分别为加粗、下划线及倾斜文字
hello hello hello
strong,em,mark代表特别重要，强调，高亮的文字
重要         重要        重要
figure标签用于包裹图片、图表、图形、视频等媒体内容，用于将这些内容与其相关的标题或说明文字一起展示。通常与figcaption标签一起使用，figcaption标签用于添加标题或说明文字。

1. <figure>
2.   <img src="https://www.cnblogs.com/image.jpg" alt="Description of image">
3.   <figcaption>This is a description of the image</figcaption>
4. </figure>

复制代码

7.表单标签

1.表单创建

表单用来收集信息，比如注册、登录、发送评论反馈、购买商品等

1. [/code][size=4]2.基本控件[/size]
3. input 属性type
4. [size=3]1.文本框[/size]
6. disabled锁死，required必填
7. [size=3]2.单选框和复选框[/size]
9. name属性设置互斥，value设置提交值
10. [code]<input type="radio" name="sex" value="男">男
11. <input type="radio" name="sex" value="女">女
12. <input type="checkbox" name="mycheckbox" id="1" value="1"><label for="1">1</label>

复制代码

3.label标签

点击汉字亦可选中

1. <label><input type="radio" name="sex" value="男">男</label>
2. <label><input type="radio" name="sex" value="女">女</label>

复制代码

4.密码框

1. [/code][size=3]5.下拉菜单[/size]
3. value中是提交给服务器的值
4. [code]<select name="" id="">
5.     <option value="alipay">支付宝</option>
6.     <option value="wx">微信</option>
7.     <option value="bank">网银</option>
8. </select>

复制代码

6.多行文本框

1. [/code][size=3]7.三种按钮[/size]
3. button,submit,reset
4. [code]

复制代码

3.HTML5新增控件

普遍兼容到IE9
datalist控件，为输入框提供一些备选项

1. <input type="text" list="province-list">
2. <datalist id="province-list">
3.     <option value="山东"></option>
4.     <option value="山西"></option>
5.     <option value="江苏"></option>
6.     <option value="安徽"></option>
7. </datalist>

复制代码

8.表格标签

1.标签

table   tr:table   row  td:table  data  th:table  header  caption:标题

1. <table border="1" width="600">
2.     <caption>表格标题</caption>
3.     <tr>
4.         <th>第一列</th>
5.         <th>第二列</th>
6.         <th>第三列</th>
7.         <th>第四列</th>
8.     </tr>
9.     <tr>
10.         <td>a</td>
11.         <td>b</td>
12.         <td>c</td>
13.         <td>d</td>
14.     </tr>
15.     <tr>
16.         <td>e</td>
17.         <td>f</td>
18.         <td>g</td>
19.         <td>h</td>
20.     </tr>
21. </table>

复制代码

2.合并单元格

colspan列跨度
rowspan行跨度
问题

1、什么标签会独占一行

div/p/h1~6/ul/ol/li/dl/dt/dd/table/form
2、什么标签不会独占一行

a/span/strong/em/u/b/i
3、img 标签如何展示图片

使用img标签，src填入地址，width height设高宽,注意绝对路径和相对路径
4、a 标签如何跳转链接

使用a标签，href属性中输入链接，tartget=“blank”在新标签页中打开
5、ul 和 li 标签的使用（无序列表）

无序列表是一个父子组合标签，不能单独出现
ul是父标签，li是子标签
ul子标签只能是li,不能出现其它标签。li中可以出现其它标签

来源:https://www.cnblogs.com/mcyn/p/18073640
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！