前端入门HTML标签

运维研究僧

已于 2024-06-29 22:18:48 修改

阅读量614

点赞数 8

分类专栏：前端文章标签：前端 html

于 2024-06-29 13:06:25 首次发布

本文链接：https://blog.csdn.net/weixin_45212547/article/details/140062693

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Link

用来链接外部样式文件

<link href="style.css" ref="stylesheet">

style

页内样式表定义，放在head标签中。

当和Link重复定义时，以页内定义为准

    <style type="text/css">
        body {
            color: red;
        }
    </style>

链接

<a href="https://www.baidu.com" target="_blank">链接</a>

href属性，指定链接或锚点

href = “#test”，这是定义页内的锚点
href=“http://www.baidu.com”，指定域名的超链接
href=‘test’，使用当前URL的资源路径，拼接上test
href=‘/test’，使用当前URL的站点根路径，拼接test

target属性，指定是否在本窗口打开

_blank 就是指新窗口打开链接
_self当前页面打开链接

标题

<h1>~<h6>，标题标签，默认h1字体最大，h6字体最小

图片

<img src="https://img-s-msn-com.akamaize.net/tenant/amp/entityid/BB1p3oun.img?w=690&h=433&m=6&x=104&y=83&s=284&d=284" alt="test">

图片标签，src指定图片路径。注意，图片会发起一个HTTP GET请求。alt图片不能显示时，看到这属性

的文本。

如果想让图片也有超链接，在其外部加上A标签。

图层

<div id="logo" class="logo"></div>

d属性，非常重要，标签的唯一标识。

class属性，非常重要，样式表定位并附加样式。目前在前端编程、爬虫中非常有用。

<div> 标签，目前该标签加上CSS，被广泛用于网页布局中。

span

<span> 标签是一个行内容器，用于标记文本的一部分，或文档的一部分。

<span> 标签可以通过 CSS 轻松进行样式设置，也可以使用 class 或 id 属性通过 JavaScript 进行操作。

<span> 标签与div非常相似，但 div是块级元素，而 <span> 是行内元素。

<p>这位姑娘有一双<span style="color:blue">蓝色</span>的眼睛。</p>

列表

无序列表

    <ul>
        <li>coffee</li>
        <li>milk</li>
    </ul>

有序列表

    <ol>
        <li>coffee</li>
        <li>milk</li>
    </ol>

表格

HTML表格的基本属性

<table>...<table>：定义表格
<tr>...</tr>：定义表格的行
<th...</th>：定义表格的标题列（文字加粗）
<td...</td>：定义表格的列

           <td>1,2</td>
        </tr>
        <tr>
            <td>2,1</td>
            <td>2,2</td>
        </tr>
        <tr>
            <td colspan="2">占2列</td>
        </tr>
    </table>

input

<input>标签定义输入字段，用户可以在其中输入数据。

<input>元素是最重要的表单元素

<input>元素可以多种方式显示，具体取决于type属性

常用type属性

<input type="button">      定义可点击的按钮（主要与 JavaScript 一起使用以激活脚本）。
<input type="checkbox">	定义复选框。
<input type="color">	定义颜色选择器（拾色器）。
<input type="date">	定义日期控件（年月日，无时间）。
<input type="datetime-local">	定义日期和时间控件（年、月、日、时间，无时区）。
<input type="email">	定义用于输入电子邮件地址的字段。
<input type="file">	定义文件选择字段和“浏览”按钮（用于文件上传）。
<input type="hidden">	定义隐藏的输入字段。
<input type="image">	定义图像作为提交按钮。
<input type="month">    定义月份和年份控件（无时区）。
<input type="number">   定义用于输入数字的字段。
<input type="password">  定义密码字段。
<input type="radio">   定义单选按钮。
<input type="range">   定义范围控件（如滑块控件）。
<input type="reset">     定义重置按钮。
<input type="search">   定义用于输入搜索字符串的文本字段。
<input type="submit">	定义提交按钮。
<input type="tel">		定义用于输入电话号码的字段。
<input type="text">（默认值） 定义单行文本字段。
<input type="time">	定义输入时间的控件（无时区）。
<input type="url">	定义用于输入 URL 的字段。
<input type="week">		定义周和年控件（无时区）。

常用属性

属性	值	描述
alt	文本	规定图像的替代文本（仅适用于 type=“image”）。
checked	checked	规定在页面加载时应预先选中 `<input>` 元素（适用于 type=“checkbox” 或 type=“radio”）。
name	文本	规定描述 `<input>` 元素预期值的简短提示。
maxlength	数字	规定 `<input>` 元素允许的最大字符数。
minlength	数字	规定 `<input>` 元素中所需的最少字符数
required	required	规定在提交表单之前必须填写输入字段。
placeholder	文本	规定描述 `<input>` 元素预期值的简短提示。
value	文本	规定 `<input>` 元素的值。

表单

特别注意：表单控件如果要提交数据，必须使用name属性，否则不能提交到服务端。

form标签的重要属性

action，表单数据submit提交到哪里
method，提交的方法，常用POST
enctype，对提交的数据编码
- application/x-www-form-urlencoded，在发送前编码所有字符（默认）
- multipart/form-data，不对字符编码。在使用包含文件上传控件的表单时，必须使用该值
- text/plain，空格转换为 “+” 加号，但不对特殊字符编码

    <form action="" method="post">
        <table border="1" width="80%">
            <tr>
                <td colspan="2">用户注册</td>
            </tr>
            <tr>
                <td>用户名</td>
                <td><input name="username" type="text" value="abc"></td>
            </tr>
            <tr>
                <td>密码</td>
                <td><input name="password" type="password"></td>
            </tr>
            <tr>
                <td>姓别</td>
                <td><input name="gender" type="radio" value="M">男<input name="gender" type="radio" value="F">女</td>
            </tr>
            <tr>
                <td>爱好</td>
                <td><input name="interest" type="checkbox" value="basketball">篮球<input name="interest" value="music" type="checkbox">音乐<input name="interest" value="movie"  type="checkbox">电影</td>
            </tr>
            <tr>
                <td>描述</td>
                <td><textarea cols="30" rows="10" name="detail"></textarea></td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="reset">
                    <input type="submit">
                </td>
            </tr>
        </table>
    </form>
</body>