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.无序列表<ul></ul>
无序列表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.有序列表<ol></ol>
语法基本同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.定义列表<dl></dl>
解释说明
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单位是像素,省略其中的一个属性按原始比例缩放图片
<img src=“images/exm.jpg” alt=“样例图” width=“300” height=“180”>
.png比较常见
图片插入路径:
1.相对路径
当前目录起始,../ 表示回退一级目录
2.绝对路径
精准的不以当前网页位置为主,可用网址或电脑目录如E:\images
2.超级链接
1.普通链接
用于网页的跳转
href支持相对路径和绝对路径
title属性:设置鼠标的悬停文本
target:在新标签页中打开网页
可用a标签包裹图片标签实现点击图片链接
<a href=“index.html” title=“到首页”>首页链接</a>
2.页面内锚点
较长页面时适当给标签添加id属性,它将成为页面的锚点
<h1 id=“wuxi”>无锡</h1>
在网址后添加#号,页面将自动滚动到锚点所在位置
lvyou.html#wuxi
<a href="#top">回到顶部</a>
3.下载链接
当指向exe/zip/rar等文件时将自动你成为下载链接
<a href="test.7z">下载</a>
4.邮件链接、电话链接
<a href="mailto:2542691072@qq.com" target="_blank">我的邮箱</a> <a href="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="image.jpg" alt="Description of image"> <figcaption>This is a description of the image</figcaption> </figure>
7.表单标签
1.表单创建
表单用来收集信息,比如注册、登录、发送评论反馈、购买商品等
<form action="" method="post"></form>
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.密码框
<input type="password" placeholder="请输入密码">
5.下拉菜单
value中是提交给服务器的值
<select name="" id=""> <option value="alipay">支付宝</option> <option value="wx">微信</option> <option value="bank">网银</option> </select>
6.多行文本框
<textarea name="" id="" cols="30" rows="10"></textarea>
7.三种按钮
button,submit,reset
<input type="submit" value="提交">
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中可以出现其它标签
· [翻译] 为什么 Tracebit 用 C# 开发
· 腾讯ima接入deepseek-r1,借用别人脑子用用成真了~
· Deepseek官网太卡,教你白嫖阿里云的Deepseek-R1满血版
· DeepSeek崛起:程序员“饭碗”被抢,还是职业进化新起点?
· RFID实践——.NET IoT程序读取高频RFID卡/标签