入门级HTML总结-CSDN博客

本文链接：https://blog.csdn.net/ganli_lin/article/details/136260500

HTML简介

html是一种超文本标签语言，也是构成网页文档的主要基石之一。html文本可以说明文字、图形、动画、声音、表格、链接等。

HTML的特点

简单灵活
可扩展
平台无关性

W3school

W3School 是因特网上最大的 WEB 开发者资源，其中包括全面的教程、完善的参考手册以及庞大的代码库，可在里面翻阅各种知识点。

网站地址：https://www.w3school.com.cn

HTML的标签

常用标签

粗体标签：strong b 标签

换行标签：br

段落标签（两个相邻的p标签之间会空一行）：p

水平分割线标签：hr

设置字体标签：font

设置颜色标签：color

标题标签：hn---h1,h2,h3,h4,h5,h6 --- 其中n的取值只能是1-6 字体会越来越小，有加粗的效果。

eg（代码）:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #one{
            text-indent: 2em;
            text-align: center;
            text-transform:lowercase ;
        }
    </style>
</head>
<body>
    <div id="one">这是一个p标签</p>
</body>
</html>

表单标签

跳转的路径：action

其中的路径有：

绝对路径：从盘符开始到文件为止的一个路径

相对路径：源文件相对于目标文件的相对路径

method属性：用来明确表单提交的方式

name属性：表单的名称

表单元素

文本框、密码框、按钮、下拉列表框

input标签

select标签

textarea标签

eg（代码）:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一次作业</title>
</head>
<body bgcolor="pink" background="抱着石膏娃娃.jpg">
    <div style="text-align:center;">
    <b>用户注册</b>
    <form action=""></form>
        用户名：<input type="text" ><br>
        密 码：<input type="password"><br>
        <p>
        请选择您的性别：<input type="radio">男
        <input type="radio">女生
        </p>
        <p>
        请选择您的爱好：<input type="checkbox">足球
        <input type="checkbox">篮球
        <input type="checkbox">LOL
        <input type="checkbox">韩剧
        <input type="checkbox">王者荣耀
        </p>
        邮箱：<input type="email" value="请输入您的邮箱"><br>
        用户头像：<input type="file" value="选择文件"><br>
        <form action="">
        您的家庭住址是：
            <select>
            <option>重庆</option>
            <option>西安</option>
            <option>四川</option>
            </select>
        </form>
        <br>
        <form action="">
        您的收货地址是：
        <select multiple>
        <option>请选择您的收货地址</option>
       <option>永川</option>
       <option>江北</option> 
       <option>万州</option>  
        </select> 
        </form>
        您的建议或者意见：<br><textarea>您的建议或者意见</textarea> <br>   
        请选择您喜欢的颜色：<input type="color" ><br>
        注册的时间：<input type="datetime-local"><br>
        <input type="button" value="注册">
        <input type="reset">
    </p></div>
    </body>
    </html>

常见的属性

超链接：a标签

访问过的超文本链接的颜色：vlink

激活超文本链接的颜色：alink

超文本链接的颜色：link

文本的颜色：text

背景颜色：bgcolor

背景图片：background

宽度：width

高度：height

边框：border

位置：align

eg（代码）:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div.list > ul{
            border: 1px solid red ;
        }
        .list li{
            color: rgb(49, 162, 85);
            width: 200px;
        }
        .one,.two,#first{
            color: blanchedalmond;
            width: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="one">第一个</div>
    <div class="two">第二个</div>
    <div class="list">
        <ul>
            <li>这是1</li>
            <li>这是2</li>
            <li>这是3</li>
            <li>这是4</li>
        </ul>
    </div>   
</body>
</html>

位图

鼠标点击的形状：shape

表述鼠标点击形状的大小：coords

表示要跳转的路径：href

eg（代码）:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>位图</title>
</head>
<body>
    <img src="猫咪.jpg" alt="猫咪" usemap="#cat">
    <map name="cat">
        <area shape="circle" coords="88,88,89" href="C:\Users\86191\OneDrive\桌面\云计算-前端\第一天\5.html">
    </map>
</body>
</html>

多媒体标签

音频：audio

视频：video

表格布局

table标签

表格的边框：border

表格的宽度和高度：width height

表格的背景的颜色和图片：bgcolor background

表格的位置：align

表格的间距和边距：cellpadding cellspacing

表格的合并：rowspan="n" 其中n是一个整数，表示在单元格垂直方向去跨行（合并行）

colspan = "n" ------- n是一个整数，表示在单元格水平方向去跨列（合并列）

eg（代码）:电影封面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>第二次作业</title>
</head>
<body>
    <h1>热门电影板块</h1>
        <hr>       
        <table width="1000px">
            <tr>
                <td>
                <h3>最近热门电影</h3>
                </td>
                <td>热门</td>
                <td>最新</td>
                <td>豆瓣高分</td>
                <td>冷门佳片</td>
                <td>华语</td>
                <td>欧美</td>
                <td>日本</td>
                <td>
                <a href="https://www.cqcst.edu.cn/">更多&gt;&gt;</a>
                </td>
            </tr>
        </table>
            <hr>
        <table>
            <tr>
                <td><img src="1.png" alt=""></td>
                <td><img src="2.png" alt=""></td>
                <td><img src="1.png" alt=""></td>
                <td><img src="2.png" alt=""></td>
            </tr>
            <tr>
                <td>死寂</td>
                <td>致命ID</td>
                <td>盗梦空间</td>
                <td>禁闭岛</td>
            </tr>
            <tr>
                <td><img src="1.png" alt=""></td>
                <td><img src="2.png" alt=""></td>
                <td><img src="1.png" alt=""></td>
                <td><img src="2.png" alt=""></td>
            </tr>
            <tr>
                <td>死寂</td>
                <td>致命ID</td>
                <td>盗梦空间</td>
                <td>禁闭岛</td>
            </tr>
    </table>
</body>
</html>