前段入门（标签）

最新推荐文章于 2024-10-09 11:23:49 发布

xxxLyman

最新推荐文章于 2024-10-09 11:23:49 发布

阅读量294

点赞数 1

分类专栏：战前准备文章标签： html html5 css

本文链接：https://blog.csdn.net/javaren001/article/details/124696491

版权

战前准备专栏收录该内容

41 篇文章 0 订阅

订阅专栏

提示：优秀的后端开发也是要会前段的

前段入门

一、基础标签（了解即可）

一、基础标签（了解即可）

1、标题标签

<h1>我是标题 h1</h1>
<h2>我是标题 h2</h2>
<h3>我是标题 h3</h3>
<h4>我是标题 h4</h4>
<h5>我是标题 h5</h5>
<h6>我是标题 h6</h6>

2、hr标签

<hr> 标签在浏览器中呈现出 横线 的效果。

3、字体标签（过时）

font：字体标签

4、换行标签

<br>

5、段落标签

<p>

6、加粗、斜体、下划线标签

* b：加粗标签
* i：斜体标签
* u：下划线标签，在文字的下方有一条横线

7、居中标签

<center>
    <b>沙柳河水流淌</b>
</center>

8、图片、音频、视频标签

* img：定义图片

  * src：规定显示图像的 URL（统一资源定位符）

  * height：定义图像的高度

  * width：定义图像的宽度

* audio：定义音频。支持的音频格式：MP3、WAV、OGG 

  * src：规定音频的 URL

  * controls：显示播放控件

* video：定义视频。支持的音频格式：MP4, WebM、OGG
  * src：规定视频的 URL
  * controls：显示播放控件

9、超链接标签

`a` 标签属性：

* href：指定访问资源的URL 

* target：指定打开资源的方式
  * _self：默认值，在当前页面打开
  * _blank：在空白页面打开

10、列表标签
在这里插入图片描述
11、表格标签

* table ：定义表格

  * border：规定表格边框的宽度

  * width ：规定表格的宽度

  * cellspacing：规定单元格之间的空白

* tr ：定义行

  * align：定义表格行的内容对齐方式

* td ：定义单元格

  * rowspan:规定单元格可横跨的行数

  * colspan:规定单元格可横跨的列数

* th：定义表头单元格

12、布局标签
在这里插入图片描述

13、表单标签
在这里插入图片描述
14、form 的标签属性

* **action：规定当提交表单时向何处发送表单数据，该属性值就是URL**

  以后会将数据提交到服务端，该属性需要书写服务端的URL。而今天我们可以书写 `#` ，表示提交到当前页面来看效果。

* **method ：规定用于发送表单数据的方式**

  method取值有如下两种：

  * get：默认值。如果不设置method属性则默认就是该值
    * 请求参数会拼接在URL后边
    * url的长度有限制 4KB
  * post：
    * 浏览器会将数据放到http请求消息体中
    * 请求参数无限制的

小练习：
完成下图的效果
在这里插入图片描述
代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小练习</title>
    <style>
        table tr th{
            font-weight: normal;
        }
    </style>
</head>
<body>
<div id="div1" align="center">
    <h3 align="center"><label>注册详情</label></h3>
    <hr>
    <label>姓名：</label>
    <input type="text" name="username" placeholder="在此输入姓名">
    <br>
    <label>密码：</label>
    <input type="password" name="password" placeholder="在此输入密码">
    <br>
    <label>邮箱：</label>
    <input type="email" name="mailbox" placeholder="在此输入邮箱">
    <br>
    <label>手机：</label>
    <input type="text" name="phone" placeholder="在此输入手机号">
    <br>
    <hr>
    <table align="center" cellspacing="0" border="0" >
        <tr align="center">
            <th> <label>性别：</label></th>
            <th> <input type="radio" value="man" name="sex" checked>男
              <input type="radio" value="women" name="sex" >女</th>
        </tr>
        <tr align="center">
            <th><label>爱好：</label></th>
            <th> <input type="checkbox" name="hobby" value="1">音乐
                <input type="checkbox" name="hobby" value="2">电影
                <input type="checkbox" name="hobby" value="3">游戏</th>
        </tr>
        <tr align="center">
            <th> <label>出生日期:</label></th>
            <th> <input type="date" name="brithday"></th>
        </tr>
        <tr align="center">
            <th>  <label>所在城市:</label></th>
            <th>  <select name="city">
                <option selected hidden disabled value="">--请选择所在的城市--</option>
                <option value="1">北京</option>
                <option value="2">上海</option>
                <option value="3">杭州</option>
            </select></th>
        </tr>

    </table>
    <br>
    <hr>
    <div id="div3">
    <label>个性签名：</label>
    <textarea name="autograph" placeholder="请写下您的与众不同" ></textarea>
    <hr>
    </div>
    <input type="button" value="注册">
    <input type="button" value="重置">
</div>
</body>
</html>