HTML基础（基于黑马程序员视频的学习笔记）

入出
110 阅读5分钟

HTML标签

1、标题和段落

<h1>一级标题</h1> ~ <h6>六级标题</h6>是标题标签，独占一行，均有加粗效果，且字体逐渐变小

<h1>一级标题</h1>

​

一级标题

​

<h6>六级标题</h6>

​

六级标题

​

<p>p是段落标签，独占一行</p>

​

p标签是段落标签，独占一行

​

<br> (换行)

 

<hr> (一行横线)

​

​

 

2、文本格式化标签

标签说明效果
<b></b> <strong></strong>加粗加粗
<u></u> <ins></ins>下划线下划线
<i></i> <em></em>倾斜倾斜
<s></s> <del></del>删除线删除线

其中，strong、ins、em、del表示的强调语义更强烈，更推荐

 

3、媒体标签

图片标签：

<img src="" alt="">

其中路径中的./表示当前的路径，可用./文件名也可直接文件名获取同级文件，默认宽高等比缩放（只需给出width和height中的一个值）

如：

<img src="C:\xxx.jpg" alt="" title="title文字在鼠标悬停时显示" width="60%" height="">

 

音频标签：

<audio src="" controls></audio>

controls：显示播放控件，autoplay：自动播放（部分浏览器不支持），loop：循环播放

如：

<audio src="C:\xxx.wav" controls></audio>

​

视频标签：

<video src=""></video>

controls：显示视频控件，autoplay：自动播放（谷歌浏览器需配合muted属性静音播放），loop：循环播放

如：

<video src="C:\xxx.mp4" controls></video>

​

超链接：

<a href="目标网页.html">超链接</a>

target：_self，默认值，在当前窗口跳转；_blank，在新窗口跳转。

如：

<a href="www.baidu.com" target="_blank">跳转百度</a>

跳转百度

开发初期，不知道跳转地址，可以将href的值书写为 #

 

4、列表标签

无序列表

ul表示无需标签的整体，用于包裹li标签

li标签表示无序列表的每一项，用于包含每一行的内容

ul中只能包含li标签，li标签中可以包含任何内容

如：

<ul>
    <li>苹果</li>
    <li>香蕉</li>
</ul>

​

  • 苹果
  • 香蕉

​

 

有序列表

ol表示无需标签的整体，用于包裹li标签

li标签表示无序列表的每一项，用于包含每一行的内容

ol中只能包含li标签，li标签中可以包含任何内容

如：

<ol>
    <li>苹果</li>
    <li>香蕉</li>
</ol>

​

  1. 苹果
  2. 香蕉

​

 

自定义列表

dl表示自定义列表的整体，用于包裹dt/dd标签

dt表示自定义列表的主题

dd表示自定义列表的针对主题的每一项内容

dd会默认显示缩进效果，dl中只能包含dt/dd标签，dt/dd标签中可以包含任何内容

如：

<dl>
    <dt>帮助</dt>
    <dd>指南</dd>
    <dd>xx</dd>
</dl>

​

  • 帮助

    • 指南
    • xx

​

 

5、表格标签

table表示整体，可用于包裹多个tr

tr表示表格的每一行，可用于包裹td

td表示表格单元格，可用于包裹内容

表格属性：

border：边框宽度，width：表格宽度，height：表格高度（宽高设置只对tbody有效，但一般宽高在CSS里设置）

caption：表格标题，书写在table标签内部，th：表头单元格（有加粗效果），书写在tr标签内部

表格结构标签包含thead、tbody、tfoot，分别表示表头、表主体、表底，表格标签内部用于包裹tr标签，可省略不写

合并单元格：（保留左/上原则）

rowspan：跨行合并，属性值：合并单元格的个数

colspan：跨列合并，属性值：合并单元格的个数

如：

<table>
    <caption><strong>学生表</strong></caption>
    <thead>
        <tr>
        	<th>name</th>
        	<th>age</th>
        	<th>sex</th>
    	</tr>
    </thead>
    <tbody>
        <tr>
        	<td>小明</td>
        	<td rowspan="2">14</td>
        	<td>女</td>
    	</tr>
        <tr>
        	<td>小红</td>
        	<!-- <td>15</td>   //删除该行 --> 
        	<td>男</td>
    	</tr>
    </tbody>
    <tfoot>
        <tr>
        	<td>...</td>
        	<td>...</td>
        	<td>...</td>
    	</tr>
    </tfoot>
</table>

​

nameagesex
小明14女
小红男
.........

​

 

6、表单标签

input系列标签： 根据type属性不同，展示不同效果。

标签名type属性值说明
inputtext文本框，输入单行文本
—password密码
—radio单选框
—checkbox多选框
—file文件选择
—submit提交
—reset重置
—button普通按钮，默认无功能，配合JS使用

text/password：placeholder属性表示占位符

radio：含有相同name属性的为一组，checked默认选中

checkbox：checked默认选中

file：multiple表示多文件选择

submit、reset、button：需要配合form（表单域标签）使用

button标签是双标签，更便于包裹其他内容：文字图片等，Google浏览器中button默认是提交（submit）按钮

如：

<form action="">
    文本框：<input type="text" placeholder="请输入文字">
    <br>
    密码：<input type="password" placeholder="请输入密码">
    <br>
    性别：<input type="radio" name="sex">男 <input type="radio" name="sex" checked>女
    <br>
    爱好：<input type="checkbox" checked>
    <br>
    多文件选择：<input type="file" multiple>
    <br>
    
    <input type="submit">
    <input type="reset">
    <input type="button" value="按钮">
    <br>
    
    <button>我是按钮</button>
    <button type="submit">提交button</button>
    <button type="reset">重置button</button>
    <button type="button">无用button</button>
</form>

 

 

select下拉菜单标签： select：下单菜单整体，option：下拉菜单的每一项

selected：下单菜单的默认选中

textarea标签： cols规定文本域内可见宽度，rows规定文本域内可见行数（可通过右下角调整大小，实际推荐使用CSS设置样式）

label标签： 实现点击文字即勾选

①用label标签把内容包裹，表单添加id属性，label标签for属性设置对应id

②直接用label把内容和标签标签一起包裹，把label标签的for属性删除

如：

<select>
    <option>北京</option>
    <option>上海</option>
    <option selected>广州</option>
    <option>深圳</option>
</select>

<textarea cols="40" rows="10"></textarea>

性别：<input type="radio" name="sex" id="man"><label for="man">男</label> <!-- 第一种方法 -->
	 <label><input type="radio" name="sex" checked>女</label>            <!-- 第二种方法 -->

 

 

7、语义化标签

没有语义的布局标签：

div：一行只显示一个

span：一行可显示多个

如：

<div>
    this is div
</div>
<div>
    this is div
</div>

<span>this is span</span>
<span>this is span</span>

 

有语义的布局标签：

header：网页头部

nav：网页导航

footer：网页底部

aside：网页侧边栏

section：网页区块

article：网页文章

 

 

8、字符实体

源码中即使输入多个空格，网页端也只会识别一个

 

  

HTML骨架标签说明

  • <!DOCTYPE html>：文档类型声明，告诉浏览器该网页的HTML版本

  • <html lang="en">：标识网页使用的语言，常见：zh-CN简体中文，en英文

  • <meta charset="UTF-8">：标识网页使用的字符编码，开发统一使用UTF-8即可

    • 常见的字符编码：
    • UTF-8：万国码，国际化的字符编码，收录了全球语言文字
    • GB2312：6000+汉字
    • GBK：20000+汉字

  • <meta http-equiv="X-UA-Compatible" content="IE=edge">，解决IE兼容性差

  • <meta name="viewport" content="width=device-width, initial-scale=1.0">

    • 宽度 = 设备宽度 ，移动端网页的时候用
avatar
文章
阅读
粉丝