html常用标签

一、HTML-Highper Text Markup Language

WEB网页的组成:
HTML结构:表格表单等。重在结构,没有样式(W3C)
CSS表现:布局、配色、定位、做动画(W3C)
JS行为:触发行为、图片循环播放、视频暂停开启(W3C\DOM\ECMAScript)

二、HTML格式:

<!DOCTYPE html>文档声明标签
<html lang="en">语言
<head>
    <meta charset="UTF-8">编码解码,UTF-8万国码
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

三、标签及格式

1.标题标签

<h1></h1>----<h6></h6>

2.段落标签

<p></p>,段落与段落之间有段间距

3.换行标签

<br/>,换行是一个空标记(强制换行)

4.水平线

<hr/>空标记

5.加粗有两个标记(推荐strong)

<b>加粗内容</b>只是显示加粗
<stong>强调的内容</strong>突出的文本

6.倾斜有两个标记(推荐em)

<em>强调文本</em>
<i>倾斜文本</i>

7.删除线有两个标记(推荐del)

<s>文本</s>删除线
<del>文本</del>删除线

8.扩展

<u>文本</u>下划线
<sub></sub>下标
<sup></sup>上标

hr的特殊设置:

    hr颜色:<br/>
    <hr color="green">
    <hr color="pink">
    <hr color="purple">
    hr宽度:<br/>
    <hr color="pink" width="300">
    <hr color="yellow" width="600">
    hr左右放置:<br/>
    <hr color="red" width="300" align="left">
    <hr color="red" width="300" align="right">
    hr无阴影:<br/>
    <hr noshade>

在这里插入图片描述

四、特殊符号

    1.尖角号:<br/>
    左尖角号:&lt;<br/>
    右尖角号:&gt;<br/>
    2.空格:<br/>
    &nbsp;该空格占据宽度受字体的影响,明显而强烈<br/>
    &emsp;占据的宽度正好是一个中文字符,且基本上不受字体影响<br/>
    3.版权:<br/>
    &copy;<br/>
    4.商标:<br/>
    &trade;<br/>
    &reg;<br/>

在这里插入图片描述

五、div和span标签

    1.div标签,没有具体含义,用来划分页面的区域,独占一行。<br/>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    2.span,没有实际意义,主要应用在对于文本独立修饰的时候,内容有多宽就占多宽的空间距离<br/>
    <h3>体育<span style="color: pink;">SPORTS</span></h3>

在这里插入图片描述

六、列表-有序列表

    有序列表:<br/>
    <!-- 1.li里面可以随意放标签,但是ol里面只能放置li
    2.数字是自动生成的
    3.type:1,a,A,i,I
      start:取值只能是数字 -->
    <ol type="A" start="27">
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ol>


    无序列表:<br/>
    <!-- 1.ul里面只能放li,li里面可以放其他标签
    2.默认的是黑色的实心圆
    3.type,disc、circle、square、none(用的最多)-->
    <ul type="square">
        <li>111</li>
        <li>111</li>
        <li>111</li>
    </ul>


    自定义列表:<br/>
    <!-- 一般是整段复制 -->
    <dl>
        <dt>我是图片</dt>
        <dd>我是文字</dd>
    </dl>
    <dl>
        <dt>我是图片</dt>
        <dd>我是文字</dd>
    </dl>
    <dl>
        <dt>我是图片</dt>
        <dd>我是文字</dd>
    </dl>

在这里插入图片描述

七、图片标签

<body>
    图片标签的路径:<br/>
    <!-- 同级目录
    1. 1.jpg
    2. ./.1.jpg -->
    <img src="./1.jpg">
    <img src="D:\WEB前端\1.jpg">

    <!-- 同级目录下的不同文件夹 -->
    <img src="img/2.jpg"><br/>

    <!-- ../返回上一级目录,从上一级目录中向下寻找 -->
    
    图片标签的属性:<br/>
    <img src="img/2.jpg" title="鼠标悬停上去之后的提示" alt="图片不显示之后(加载失败的提示信息)" width="300" height="300">

</body>

八、超链接标签

<body>
    超链接标签:<br/>
    <a href="https://www.baidu.com/index.php?tn=monline_3_dg" title="鼠标悬停上去之后的提示" target="规定在何处打开文档">百度</a>
    <!-- target属性:规定在何处打开文档
    A.target="self"默认值
    B.target="_blank"新窗口打开 -->
    <a href="费曼学习技巧案例.html" title="费曼学习技巧案例" target="_blank">费曼学习技巧案例</a>
</body>

九、table表格

<body>
    表格:<br/>
    1.宽度 width
    1.宽度 width
    2.高度 height
    3.边框 border
    4.边框颜色 bordercolor
    5.背景颜色 bgcolor
    6.水平对齐 align
    7.cellspacing="单元格与单元格之间的间距"
    8.cellpadding="单元格与内容之间的空隙"
    <table><!-- 创建表格 -->
        <tr><!-- tr表示行 -->
            <td>1</td><!-- td表示单元格 -->
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
        </tr>
    <tr></tr>
    </table>
    表格的属性:<br/>
    <table border="1" width="50%" height="100" align="center" 
    bordercolor="grey" bgcolor="pink"
    cellspacing="0" cellpadding="50">
    <!-- width px.百分比(相对于父元素的,) -->
    <!-- height px.百分比(相对于父元素的,) -->
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
        </tr>
    </table>



    行tr属性:<br/>
    1.高度 height
    2.背景颜色 bgcolor
    3.文字水平对齐 align="left或right或center"
    4.文字垂直对齐 valign="top或middle或bottom"
    <table border="1" width="200" height="200" bgcolor="yellow">
        <tr bgcolor="orange" height="120" align="center" valign="middle">
            <td>1</td>
            <td>2</td>
        </tr>
        <tr valign="middle">
            <td>3</td>
            <td>4</td>
        </tr>
    </table>


    <table border="1">
    <!-- colspan合并列,rowspan合并行 -->
        <tr>
            <td colspan="2" rowspan="2">1</td>
            <td>2</td>
        </tr>
        <tr>
            <!-- <td colspan="2">4</td>
            <td>5</td>
            <td>6</td> -->
        </tr>
        <tr>
            <td>7</td>
            <td colspan="2">8</td>
            <!-- <td>9</td> -->
        </tr>
    </table>
</body>

在这里插入图片描述