编程技术

Document

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>

在这里插入图片描述