Html概述

最新推荐文章于 2023-03-29 10:06:26 发布

qq_36575247

最新推荐文章于 2023-03-29 10:06:26 发布

阅读量224

点赞数

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

本文链接：https://blog.csdn.net/qq_36575247/article/details/85563144

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

html

超文本标记语言 hyper text markup language
俗称网页

<html>
    <head> 
        子标签
    </head>
    <body> 
        子标签
    </body>
</html>

1. head 中的常见标签

文件名字后缀必须是 *.html 或者 *.htm
```html
<title>网页标题</title>

标签表示是网页的标题

<meta charset="字符编码">

告诉浏览器请用这个字符串编码显示网页内容

用来包含网页的脚本

<script></script>

用来包含外部样式表

<link>

2. body 中的标签

1) 标题标签

<h1> <h2> ... <h6>

2) 正文标签

段落标签

<p>

换行

<br>

分割线

<hr>

特殊文字需要转义显示
例如：
< <

>
©

3) 超链接标签

<a href="链接地址">链接文字</a>

图片标签

<img src="图片地址" width="宽度" height="高度">

宽度和高度的单位都是像素

让图片有链接的功能

<a href="链接地址"> <img src="图片地址"> </a>

页面内的链接（锚）
首先在目的地标签添加 id=“唯一编号”, 然后在超链接的 href="#唯一编号"

4) 列表标签

有序列表

<ol>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ol>

无序列表

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ul>

5) 表格标签(重点)

<table>
    <thead></thead> <!-- 头 -->
    <tbody> <!-- 体 -->
        <!-- tr 代表行 -->
        <tr> 
            <!-- td 代表列 -->
            <td></td>
            <td></td>
        </tr>  
    </tbody>
    <tfoot></tfoot> <!-- 脚 -->
</table>

table>(thead>tr>td2)+(tbody>tr5>td*2)
表格合并单元格，可以使用td 的属性 colspan（合并列）rowspan（合并行）

6) 表单标签(重点)

接收用户的输入

<!-- 把填写的信息收集起来发送给服务器
        有name属性的表单，会把信息发送给服务器
-->
<form action="http://www.baidu.com">
    文本框 <input type="text" name="username">
    <br>
    密码框 <input type="password" name="password">
    <br>
    按钮 <input type="button" value="点我">
    <br>
    单选框 <!-- name 用来给单选框分组 checked 表示默认勾选-->
    男 <input type="radio" name="sex" value="男"> 女 <input type="radio" name="sex" checked value="女">
    <br>
    多选框
    唱歌 <input type="checkbox" name="hobby" checked value="1">
    跳舞 <input type="checkbox" name="hobby" value="2">
    游戏 <input type="checkbox" name="hobby" value="3">
    睡觉 <input type="checkbox" name="hobby" value="4">
    <br>
    <input type="file">
    <br>
    <input type="date" value="2018-12-30">

    <br>
    <input type="submit" value="提交">
    <input type="reset" vlaue="重置">
</form>

7. iframe

内嵌另一个页面

<iframe src="http://www.baidu.com" width="100%" height="500"></iframe>

一个html的基本框架

<html>
    <head>
        <meta charset="utf-8">
        <title>标题</title>
        <script>脚本</script>
        <link> 链接外部的样式表
        <style>样式表</style>
    </head>
    <body>
        <h1 ~ h6>
        <p id="目标id">
        <br>
        <hr>
        <a href="链接地址">链接文字</a>
        <a href="#目标id">链接文字</a>
        <a href="链接地址"> <img src="图片地址"> </a>
        <ol> <li>...
        <ul> <li>
        <table border="边框宽度" width="表格宽度">
            <thead> <tr> <th>
            <tbody> <tr> <td rowspan="合并行数" colspan="合并列数">
            <tfoot>
        </table>
        <form action="服务地址">
            <input type="text" name="" value=""> 文本框
            <input type="password" name="" value=""> 密码框
            <input type="radio" name="" value=""> 单选
            <input type="checkbox" name="" value=""> 多选
            <input type="button"> 普通按钮
            <input type="submit"> 提交按钮
            <input type="reset"> 重置按钮
            <input type="file"> 文件选择框
            <select>
                <option></option>
            </select>
        </form>
        <div></div> 容器标签, 用来将其他标签进行分组，布局
    </body>
</html>

qq_36575247

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Html概述

html超文本标记语言 hyper text markup language俗称网页&lt;html&gt; &lt;head&gt; 子标签 &lt;/head&gt; &lt;body&gt; 子标签 &lt;/body&gt;&lt;/html&gt;1. head 中的常见标签文件名字后缀必须是 *.htm...
复制链接

扫一扫

专栏目录