HTML基础语法

2024-03-14 18:07 由 mcyn 发表于 #前端开发

HTML特性：

1.空白折叠现象

1.文字间折为一个空格

<p>hello     world!</p>

2.标签内壁空白忽略

<p>      hello world!      </p>

2.转义字符

<p>小于号&lt;</p>
<p>大于号&gt;</p>
<p>空格&nbsp;</p>
<p>版权号&copy;</p>
我们今天学习了&lt;p&gt;&lt;/p&gt;标签

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单位是像素，省略其中的一个属性按原始比例缩放图片

.png比较常见

图片插入路径：

1.相对路径

2.绝对路径

精准的不以当前网页位置为主，可用网址或电脑目录如E:\images

2.超级链接

1.普通链接

用于网页的跳转

href支持相对路径和绝对路径

title属性:设置鼠标的悬停文本

target:在新标签页中打开网页

可用a标签包裹图片标签实现点击图片链接

2.页面内锚点

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

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

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中可以出现其它标签