HTML基础语法
HTML特性：1.空白折叠现象
1.文字间折为一个空格
<p>hello world!</p>2.标签内壁空白忽略
<p> hello world! </p>2.转义字符
<p>小于号<</p>
<p>大于号></p>
<p>空格 </p>
<p>版权号©</p>
我们今天学习了<p></p>标签3.注释
vscode 快捷键 CTRL + /
4.基础标签
DTD文档类型声明，head里是网页配置，body中是网页内容
***meta元标签（单标签），网页的基础配置，name属性非常关键，里面可设置网页的搜索关键词Keywords，网页描述Description,是SEO的重要手段。
title标签栏内容，搜索引擎收录的标题
1.分隔符div:将相关内容组合以便和其他内容分割。
2.标题标签h1~6:从强到弱，其中h1最为重要(搜索引擎较为看重)，一般网页只能放一个，不推荐多个。
3.段落标签p:html换行时页面效果不会换行，因此需将段落放入p标签中，p标签中不能含有其他p标签或者h系列标签。
5.列表标签
1.无序列表
无序列表unordered list；配合li标签(list item列表项)使用
无序列表是一个父子组合标签，不能单独出现
ul是父标签，li是子标签,li标签不能散放，只能是是ul或者ol的子标签
ul子标签只能是li,不能出现其它标签。li中可以出现其它标签
列表嵌套
<ul>
<li>
<h3>江苏省</h3>
<ul>
<li>南京</li>
<li>无锡</li>
<li>苏州</li>
</ul>
</li>
<li>
<h3>湖北省</h3>
<ul>
<li>武汉</li>
<li>黄石</li>
</ul>
</li>
</ul>2.有序列表
语法基本同ul标签类似，不同的是前方变为编号
了解type属性和start属性，html5被废弃，可用css
type为编号样式a,A,i,I,1 ；start是编号起始数字，必须为阿拉伯数字
reversed属性，倒序，只需写单词即可
<h1>考试排名</h1>
<ol type="1" start="5" reversed>
<li>张三</li>
<li>李四</li>
<li>王二</li>
</ol>3.定义列表
解释说明
definition list定义列表；data term数据项；data definition数据定义；
<h1>前端主要技术简介</h1>
<dl>
<dt>HTML</dt>
<dd>超文本标记语言</dd>
<dt>CSS</dt>
<dd>层叠样式表</dd>
<dt>JavaScript</dt>
<dd>JS脚本程序</dd>
</dl>6.多媒体标签和语义化标签
1.图片
一般图片放入到项目文件夹中的images子文件夹中
alt属性是对图形文本的描述，图片无法加载时会显示的备用文本，也可供视力不方便的朋友使用网页朗读器
width height单位是像素，省略其中的一个属性按原始比例缩放图片
http://bbs.itdo.tech/“images/exm.jpg” alt=“样例图” width=“300” height=“180”
.png比较常见
图片插入路径：
1.相对路径
当前目录起始，../ 表示回退一级目录
2.绝对路径
精准的不以当前网页位置为主，可用网址或电脑目录如E:\images
2.超级链接
1.普通链接
用于网页的跳转
href支持相对路径和绝对路径
title属性:设置鼠标的悬停文本
target:在新标签页中打开网页
可用a标签包裹图片标签实现点击图片链接
首页链接
2.页面内锚点
较长页面时适当给标签添加id属性，它将成为页面的锚点
无锡
在网址后添加#号，页面将自动滚动到锚点所在位置
lvyou.html#wuxi
<a target="_blank" href="https://www.cnblogs.com/#top">回到顶部</a>3.下载链接
当指向exe/zip/rar等文件时将自动你成为下载链接
<a target="_blank" href="https://www.cnblogs.com/test.7z">下载</a>4.邮件链接、电话链接
<a href="https://www.cnblogs.com/mailto:2542691072@qq.com" target="_blank">我的邮箱</a>
<a target="_blank" href="https://www.cnblogs.com/tel:12306">高铁</a>我的邮箱高铁
3.音频和视频
常用格式MP3和ogg
controls属性：显示播放控件
src:音频地址
autoplay自动播放
loop循环播放
<audio controls src="music/Taylor Swift - Love Story.flac">抱歉，您的浏览器不支持当前文件，请升级浏览器</audio>
<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标签用于添加标题或说明文字。
<figure>
<img src="https://www.cnblogs.com/image.jpg" alt="Description of image">
<figcaption>This is a description of the image</figcaption>
</figure>7.表单标签
1.表单创建
表单用来收集信息，比如注册、登录、发送评论反馈、购买商品等
2.基本控件
input 属性type
1.文本框
disabled锁死，required必填
2.单选框和复选框
name属性设置互斥，value设置提交值
<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女
<input type="checkbox" name="mycheckbox" id="1" value="1"><label for="1">1</label>3.label标签
点击汉字亦可选中
<label><input type="radio" name="sex" value="男">男</label>
<label><input type="radio" name="sex" value="女">女</label>4.密码框
5.下拉菜单
value中是提交给服务器的值
<select name="" id="">
<option value="alipay">支付宝</option>
<option value="wx">微信</option>
<option value="bank">网银</option>
</select>6.多行文本框
7.三种按钮
button,submit,reset
3.HTML5新增控件
普遍兼容到IE9
datalist控件，为输入框提供一些备选项
<input type="text" list="province-list">
<datalist id="province-list">
<option value="山东"></option>
<option value="山西"></option>
<option value="江苏"></option>
<option value="安徽"></option>
</datalist>8.表格标签
1.标签
table tr:table row td:table data th:table header caption:标题
<table border="1" width="600">
<caption>表格标题</caption>
<tr>
<th>第一列</th>
<th>第二列</th>
<th>第三列</th>
<th>第四列</th>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
</tr>
</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】 我们会及时删除侵权内容，谢谢合作！
页:
[1]