HTML基础

HTML⭐⭐⭐

HTML基础

HTML的全称超文本标记语言，它采用一种标记性的语言来完成网页开发

HTML标签

标题标签

h1~h6 ,数值越大，字体越小

<h1 align="center">这是一号标题</h1>
<h2 align="right">这是二号标题</h2> 
<h3 align="left">这是三号标题</h3> 
<h4>这是四号标题</h4>
<h5>这是五号标题</h5> 
<h6>这是六号标题</h6>

文字标签

<font color="red" size="7" face="华文行楷">这是一段文字</font>
//color 设置文字的颜色
//size 设置文字的大小，值为 1~7 
//face 设置文字的字体

文字描述标签

<b>这是一个加粗的标签</b>
<strong>这也可以加粗</strong>
<i>这是一个斜体的文字</i>
<em>这也是一个斜体</em>
<cite>这个也可以是斜体</cite> 
<u>我是一个下划线</u> 
<ins>这也是一个下划线</ins> 
<strike>这是一个删除线</strike> <del>这也是一个删除线</del>

标签名	效果
	加粗
	斜体
	下划线
	删除线

特殊文字

符号	效果
&deg；	度数
&copy；	版权标准C
&reg；	注册商标R
&nbsp；	空格
&lt；	小于
&gt；	大于

上角标和下角标

sup 代表的是上角标

sub 代表的是下角标

<h1>x<sup>2</sup>+y<sup>2</sup>=z<sup>2</sup> </h1> <h1>log<sub>2</sub>10 = ? </h1>

列表标签

有序列表ul

全称叫 ordered list 简称 ol

<ol type="1"> 
	<li>第一项</li> 
	<li>第二项</li> 
	<li>第三项</li> 
</ol>
//type 属性用于设置前面有随列表的符号，分别有如下几个值
//type="1" 代表前面的符号是数字123...
//type="A" 代表前面的符号是大写字母ABCD...
//type="a" 代表前面的符号是小写字母abcd
//type="I" 代表前面的符号是大写罗马文
//type="i" 代表前面的符号是小写的罗马文

无序列表ol

无序列表的全称 unordered list

<ul type="disc">
	<li>第一项</li>
    <li>第二项</li> 
    <li>第三项</li>
</ul>
//type 属性用于设置前面的符号，主要的值有以下几个
//disc 实心圆
//circle 空心圆
//square 实心矩形

自定义列表dl

全称叫 data list 简称 dl

<dl>
	<dt><b>男明星</b> </dt> 
	<dd>刘德华</dd> 
	<dd>张一山</dd>
    <dd>胡歌</dd> 
    <dt><font color="red">女明星</font> </dt>
    <dd>刘亦菲</dd> 
    <dd>奶茶妹</dd> 
    <dd>王菲</dd> 
</dl>
//dl 可以理解成 data list , dt 可以理解成 data title

详细信息标签details（h5）

展开ul内容

<details> 
	<summary>男明星</summary> 
	<ul>
		<li>张一山</li>
        <li>刘德华</li> 
        <li>标哥哥</li> 
    </ul>
 </details>
//details 是一个复合标签，它可以与其它的标签结合起来一起使用才会有效果
//details 标签的下面可以书写 <summary> 标签，它代表摘要
//details 标签是可以通过鼠标点击以后展开与收缩的
//它是HTML5新出标签，在新版本的浏览器里面会有效果，在旧的浏览器里面可能会存在兼容性的问题

图片标签img

<img src="./img/item2.jpg" alt="这是图片" width="200" height="200" border="10" hspace="100" vspace="200" title="这是一个图片"/>

img标签属性值

src 属性用于设置图片的地址

alt 属性，当图片不能够正常显示的时候就会显示alt里面内容

width/height 属性用于设置图片的大小

border 属性用于设置图片边框

hspace 用于设置图片水平方向的间距，h的全称叫 horizontal

vspace 用于设置图片垂直方向的间距，v的全称叫 vertical

title 属性用于设置鼠标放上去以后的提示信息，它是所有标签都具备的属性，是一个通用属性

链接标签a

<a href="01.html"> 百度一下，你就知道 </a>
<hr> 
<a href="https://www.baidu.com" target="_self"> 这也是百度 </a> <hr> 
<a href="https://www.youku.com" target="_blank"> 优酷视频 </a>

标签a属性值

href 属性用于设置连接的地址，这个地址可以是外这的网页，也可以是自身的网页

target 属性用于设置网页的打开形式，有以下 几个属性

_self 在当前页面打开，默认是这个值

_blank 在一个新的空白窗口里面去打开

_search 在指定的位置打开

_parent 在父级窗口打开

_top 在顶级窗口里面去打开

表格标签table

<table border="1" cellspacing="0" cellpadding="10" width="500"> 		<caption>
		<h2>学生信息表</h2>
    </caption>
    <colgroup> 
    	<col bgcolor="red" /> 
    	<col width="70" /> 
    </colgroup> 
    <thead>
    <tr>
    	<th>姓名</th> 
    	<th>性别</th> 
    	<th>爱好</th>
    </tr> 
    </thead> 
    <tbody> 
    	<tr >
    		<td>张珊</td> 
    		<td>女</td>
            <td>看书</td> 
        </tr>
     </tbody>
     <tfoot>
     </tfoot>
</table>

表格属性值

tr 是表格的行，理解为 table row 
td 是表格行里面的数据，理解为 table data 
th 是表格的标题行里面使用的，它会自动加粗并左右居中
colgroup , col 标签是用于设置表格的列的情况的，它不设置具备的内容，只设置样式
border 属性用于设置表格的边框
cellspacing 用于设置单元格的间距（什么是单元格，单元格就可以理解为td） 
cellpadding 用于设置单元格的内间距
align 属性用于设置水平对齐方式，它有 left/center/right 三个属性值，如果设置在
table上面则是表格居中，如果设置在td上面则是单元格内容居中
valign 用于设置垂直对齐方式，它有三个属性值 top/middle/bottom 上中下三个
width/height 用于设置宽度与高度
bgcolor 用于设置背景颜色，它可以设置在table/tr/td上面
rowspan 代表行的合并
colspan 代表列的合并

分割线标签hr

<hr color="red" width="50%" size="7" align="center">

hr标签属性

color 用于设置线条的颜色

width 用于设置线条的长短

align 用于设置线条的水平排列

换行标签br

进度条标签

<progress value="30" max="100"></progress>

progress如果没有设置value与max属性，则会看到一个进度块左右滑动

value 属性用于设置进度条的当前值， max 属性用于设置最大值

仪表进度条

<!-- 假设这个进度条就是形容学生的成绩的 --> 
<meter value="80" min="0" max="100" low="60" high="90" optimum="100"> </meter> 
<hr> 
<!-- 假设要设置硬盘的使用率的进度条 --> 
<meter min="0" max="100" low="30" high="90" optimum="0" value="95"></meter>

min 代表最小值， max 代表最大值， value 代表当前值

low 用于设置低区间的范围， high 用于设置高区间的范围

optinum 用于设置最优值