前端HTML常用基础标

写在head内的标签

<head>

1.<title>网页名称</title>

<style>

/* 对span所包裹的内容设置样式：元素选择器 */

span {

color:对span标签的设置颜色;

height:对span标签的设置高度 ;

width: 对span标签的设置宽度;

text-decoration: none;//去掉下划线

line-height: 2;//设置行高，2倍的行间距

text-indent:2em;//设置首行缩进2字符

font-size: 对span标签的设置字体大小;

font-weight: 对span标签的设置字体粗细;

line-height: 对span标签的设置行高;

text-align: 对span标签的设置文本对齐方式;

display: 对span标签的设置显示方式;

vertical-align: 对span标签的设置垂直对齐方式;

background-color: 对span标签的设置背景颜色;

padding: 对span标签的设置内边距;

margin: 对span标签的设置外边距;

border: 对span标签的设置边框;

.......等等

}

span {

/* 对span标签的设置颜色关键字表示 */

color: red;

/* 对span标签的设置颜色rgb表示法 */

color: rgb(255, 0, 0);

/* 对span标签的设置颜色rgba表示法 */

color: rgba(255, 0, 0, 0.5);

/* 对span标签的设置颜色十六进制表示法 */

color: #ff0000;俩位数一样简写为color: #f00

}

</style>

</head>

写在body内的标签

<body>

1.<h1>定义一级标题的标签还有h1到h6分别为1到6级标题标签</h1>

2.<a href="超链接地址" target="打开方式">超链接名称点击跳转</a>

3.<span>span标签对内容进行包裹</span>

4.<span style="对span标签设置样式"> span里写的内容 </span>

5.<p>..内容区域...</p>（p名可以更改）

p （这p名可以更改）{

/* 对p标签的设置样式 */

如：color: red;

height: 100px;

}

6.<span class="类选择器名称">..内容区域...</span>

.类选择器名称 {

/* 对类选择器的设置样式 */

如：color: blue;

height: 100px;

}

7.<span id="ID选择器名称">..内容区域...</span>

#ID选择器名称 {

/* 对ID选择器的设置样式 */

如： color: green;

height: 100px;

}

优先级id选择器>类选择器>元素选择器

8.<video src="视频路径" controls autoplay height="高px" width="宽px"></video>

9.<audio src="音频路径" controls></audio>

10.

<!-- src:图片路径

1.绝对路径：

1.1 绝对磁盘路径：C:\Users\Administrator\Desktop\new.jpg

1.2 绝对网络路径：http://www.baidu.com/new.jpg

2.相对路径：

2.1 相对磁盘路径：img\new.jpg

2.2 ./：表示当前目录下的文件（可以省略）

2.3 ../：表示上一级目录下的文件

-->

</body>

其他常用标签

1.

<br>

2.<p>段落标签，用于包裹段落内容。</p>

可以用元素选择器搭配段落首行缩进行间距等。

3.<b>加粗标签，用于加粗文本。</b>

4.<strong>加粗标签，用于加粗文本具有强调语义。</strong>

5.&nbsp 首行缩进标签（建议用元素选择器里的text-indent标签来首行缩进）

<strong>&nbsp&nbsp 首行缩进俩个</strong>

6.盒子模型<div 使用选择器设置内容样式>这是一个div标签，用于包裹内容。</div>

div {

width: 400px;内容展示的宽度

height: 400px;内容展示的高度

background-color: #f0f0f0;背景颜色

padding: 10px;内容展示的内边距

box-sizing: border-box;内容展示的宽度和高度是否包含内边距和边框

border: 1px solid(线条的类型) red（线条的颜色）;内容展示的边框

margin: 10px auto（水平方向上的外边距自动居中）;内容展示的外边距

}

flex布局

#id{

display：flex //开启flex弹性布局

flex-direction: row;//默认是row不写这个属性，默认是row，x轴布局

flex-direction: column;//column是y轴布局

justify-content: flex-start;//默认是flex-start不写这个属性，默认是flex-start，x轴布局从左到右

justify-content: flex-end;//x轴布局从右到左

justify-content: center;//x轴布局居中

justify-content: space-around;//x轴平分空间

justify-content: space-between;//第一个和最后一个元素在容器边缘，其他元素平分空间

}

表标签

表单标签

复制代码

<!-- 表单标签form 
    method="提交方式"
     action:表单数据提交的urI地址
method:提交方式
get:默认，表单数据会出现在ur1后面，形式：/save?name=Tomsage=18
     特点：
      1,如果表单中包含了隐私数据，get方式并不安全，不推荐使用该方式，
      2,在浏览器中gt请求的大小是有限制的，不适合提交大数据量的表单，
post:表单数据会在消息作/请求体中提交到服务器
     特点：
      1,安全，
      2,请求大小没有限制
注意：表单项要想能够采集数据，必须得设置name属性，表示当前表单项的名字
    -->
    <form action="请求地址" method="提交方式">
       姓名<input type="text" name="用户名"></input>
       年龄<input type="text" name="年龄"></input>
       <input type="submit"（提交按钮） value="提交按钮名字"></input> 
    </form>

表格：

表单项标签

复制代码

<form action="路径" method="提交方式">

        姓名：<input type="text（文本框）" name="name"><br><br>

        密码：<input type="password（密码框）" name="password"><br><br>

        性别：<input type="radio（单选框）" name="gender" （同一组name属性一样） value="1" （选择男提交1）>男
        <label><input type="radio" name="gender" （同一组name属性一样） value="2" （选择女提交2）>女</label><br><br>

        爱好：<label><input type="checkbox" （复选框可以选择多个） name="hobby" value="java">（选择java提交java）java </label>
        <label><input type="checkbox" （复选框可以选择多个） name="hobby" value="game">（选择game提交game）game </label>
        <label><input type="checkbox" （复选框可以选择多个） name="hobby" value="sing">（选择sing提交sing）sing </label><br><br>

        图像：<input type="file" （文件上传框）name="image"><br><br>

        生日：<input type="date" （日期选择框） name="birthday'"><br><br>
        时间：<input type="time" （时间选择框） name="time"><br><br>
        日期时间：<input type="datetime-local" （日期时间选择框） name="datetime"><br><br>


        学历：<select name="degree" （下拉列表名字）>（select下拉列表）
            <option value="">---------------请选择----------</option>（下拉列表选项）
            <option value="1" （表单项提交的值）>大专</option>
            <option value="2" （表单项提交的值）>本科</option>
            <option value="3" （表单项提交的值）>硕士</option>
            <option value="4" （表单项提交的值）>博士</option>
        </select><br><br>

        描述：<textarea name="description" cols="30" rows="10"></textarea> <br><br>
        <!-- textarea 大文本框   这个文本框的 cols="列数" rows="行数" -->

        
        <!-- 隐藏表单不会显示出来 -->
        <input type="hidden" name="id" value="1">
      

        <!-- <!-一表单常见按钮-一> -->
        <input type="button"（普通按钮） value="按钮"（按钮名字）>
        <input type="reset"（重置按钮） value="重置"（按钮名字）>
        <input type="submit" （提交按钮）value="提交"（按钮名字）>
        <!-- 还有查询按钮，清空按钮 -->
        <br>
    </form>
    <!-- label的作用：包裹的表单项，点击文字也可以选择表单项 -->
    <!-- br换行标签 -->

1.for标签 for=name，和id为name属性的绑定点击前面的文字可以能选择文本框进行输入增加用户体验

2.placeholder="文本框提示信息输入什么内容"

页面显示：

表格

复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>(表格标签)
    <!-- 一表格展示区 -->
    <table>
        <thead>(表头标签)
            <tr>（被tr包裹的都在一行）
                <th>姓名</th>（th定义表头单元格）
                <th>性别</th>
                <th>头像</th>
                <th>职位</th>
                <th>入职日期</th>
                <th>最后操作时间</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>（表数据，表体标签）
            <tr>
                <td>令狐</td>（定义单元格）
                <td>男</td>
                <td><img class="avatar"（类选择器） src="path/to/avatar.jpg" alt=""></td>
                <td>讲师</td>
                <td>2021-06-15</td>
                <td>2024-09-16 15:30</td>
                <td class="action-buttons">
                    <button type="button">编辑</button>
                    <button type="button">删除</button>
                </td>
            </tr>

            <tr>
                <td>任盈盈</td>
                <td>女</td>
                <td><img class="avatar"（类选择器） src="path/to/avatar.jpg" alt="任盈盈"></td>
                <td>咨询师</td>
                <td>2021-07-20</td>
                <td>2024-09-17 09:00</td>
                <td class="action-buttons"（类选择器）>
                    <button（按钮标签） type="button"（普通按钮）>编辑</button（按钮标签）>
                    <button（按钮标签） type="button"（普通按钮）>别除</button（按钮标签）>
                </td>
            </tr>

             <tr>
                <td>向问天</td>
                <td>男</td>
                <td><img class="avatar" src="path/to/avatar.jpg" alt="向问天"></td>
                <td>教研主管</td>
                <td>2022-01-10</td>
                <td>2024-09-18 10:00</td>
                <td class="action-buttons">
                    <button type="button">编辑</button>
                    <button type="button">删除</button>
                </td>
            </tr>
        </tbody>
    </table>




</body>

</html>

效果：