一篇文章快速学会HTML

Yubendan

发布于 2025-12-30 15:03:56

1730

一篇文章快速学会HTML

注：适合有一定编程基础的来快速掌握HTML

超文本标记语言

超文本：文本，声音，图片，视频，表格，链接

标记：许多的标签组成

HTML页面是运行到浏览器上的

HTML

文件根标签

head

编写页面相关属性

title

页面标题

body

页面内容展示信息

DOM树

head , body … 相当于 html 的子标签

head 和 body是兄弟标签

head 与 title 是父子标签

每一个标签相当于一个对象，可以通过代码拿到这些对象进行增删查改。

$0表示标签像素为0

代码框架

HTML标签

注释标签

 <!-- 注释 -->

标题标签

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

段落标签

  <p>段落</p>

换行标签

<br/>

换行后间隙比段落小

格式化标签

加粗：

<strong>《星际宝贝史迪奇》</strong>

倾斜：

<em>《皇后》</em>

删除：

<del>《星际》</del>

下划线：

<ins>《星际》</ins>

img 标签

_src 属性

相对路径

<img src="img/OIP-C.jfif">

绝对路径

1.直接写图片路径

<img src="D://img//OIP-C.jfif">

2.网络上的路径

<img src="https://cn.bing.com/images/search?view=detailV2&ccid=xOa1rOjw&id=C2E45A49F5440934DFA10B505ABF1E0A26D083BC&thid=OIP.xOa1rOjwWguXauADCE-q4QHaKd&mediaurl=https%3A%2F%2Fpicb.zhimg.com%2Fv2-937b610f123ac83d5a09a220908fc2ff_r.jpg&exph=1188&expw=841&q=%E4%BA%8C%E6%AC%A1%E5%85%83%E8%90%9D%E8%8E%89%E5%9B%BE%E7%89%87&simid=608012321895089100&FORM=IRPRST&ck=C57FF1E75526D6B88BE2B1DE8DC7118A&selectedIndex=0&itb=0&cw=1308&ch=736&ajaxhist=0&ajaxserp=0"

其他属性

alt 属性

图片加载失败显示的文字

<img src="img/OIP-C.jfif" alt="萝莉加载失败！">

title 属性

鼠标移动时显示的文字

<img src="img/OIP-C.jfif" title="这是萝莉！">

width height 属性

改变图片大小

 <img src="img/OIP-C.jfif" width="200" height="300">

border 属性

给图片加载边框

<img src="img/OIP-C.jfif"  border="2px">

超链接标签

href 属性

 <a href="https://www..wangzhi">跳舞</a>

占位符停留在当前界面

<a href="#">

通过图片跳转

 <a href="https://www..wangzhi">
     <img src="xxxxx">
 </a>

target 属性

_self _blank

默认是 _self

 <a href="https://www..wangzhi"
     target="_blank">跳舞</a>
// 跳转到新页面

表格标签

table标签

<table border="1" cellspacing="0" cellpadding="10" align="center"> 
    <!-- 默认无边框
		border="2px" 加边框 
		cellspacing="0" 表格间隙 
		cellpadding="10" 表格大小
		align="center" 表格位置 center 居中
	-->
    
        <tr> <!-- 行 -->
            <td>姓名</td> <!-- 列 -->
            <td>年龄</td>
            <td>身高</td>
        </tr>
        <tr>
            <td>萝莉1号</td>
            <td>13</td>
            <td>145cm</td>
        </tr>
        <tr>
            <td>萝莉2号</td>
            <td>15</td>
            <td>152cm</td>
        </tr>
        <tr>
            <td>萝莉3号</td>
            <td>16</td>
            <td>156cm</td>
        </tr>
    </table>

thead tbody 标签

<thead>
    <th>
    	<td>姓名</td>
        <td>年龄</td>
        <td>身高</td>
     </th>
</thead>

合并单元格

<td rowspan="2">13</td>
<td>145cm</td>
// 合并两行

列表标签

无序列表

 <ul>
        <li type="disc">我爱萝莉！  </li>
        <li type="square">我爱萝莉！</li>
        <li type="circle">我爱萝莉！</li>
    </ul>

有序列表

 <ol>
        <li type="a">我爱萝莉！</li>
        <li type="1">我爱萝莉！</li>
        <li type="A">我爱萝莉! </li>
    </ol>

自定义列表

<dl>
        <dt> 萝莉yyds  // 自定义标题
            <dd>我爱萝莉！</dd>
            <dd>我爱萝莉！</dd>
            <dd>我爱萝莉！</dd>
        </dt>
    </dl>

表单标签

完成和服务器的一次交互

表单域：form

表单控件：input

input

用户用来输入的

type 决定类型

<form>
        文本框 <input type="text">  <!-- 单行-->
        <br>
        密码框 <input type="password">
        <br>
        单选框 <input type="radio" name="gender" checked="checked"> 萝莉01
              <input type="radio" name="gender"> 萝莉02
              <!-- 
                  name="gender" 区分是否是同一组单选框
                  checked="checked" 设置默认值
              -->
        <br>
        复选框 <input type="checkbox"> 萝莉01
              <input type="checkbox"> 萝莉02
              <input type="checkbox"> 萝莉03
        <br>
        按钮  <input type="button" value="我要c萝莉">
        <br>
    </form>

input 提交

<from action="服务器网址">
        提交内容：<input type="text" name="course">  
        <input type="submit"> <!-- 传服务器-->
        <input type="reset"> <!-- 重置-->
        <br>
        <input type="file"> <!-- 传文件-->
    </from>

lable

搭配input使用

<!-- 使文字与按钮关联起来 -->
    <label for="01"> 萝莉01</label>
    <input type="radio" name="gender" id="01"> 
    <label for="02"> 萝莉02</label>
    <input type="radio" name="gender" id="02">

select

下拉栏

<select name="" id="">
        <option value="">请选择侍寝萝莉</option>
        <option value="">萝莉01</option>
         <!-- selected="selected" 设置默认值 -->
        <option value="">萝莉02</option>
        <option value="">萝莉03</option>
    </select>

textarea

多行输入

<textarea name="" id="" cols = "30" rows="5"></textarea>
    <!-- 
    cols = "30" rows="5" 设置高度宽度
    -->

无语义标签

没有固定用途

通常用来对页面布局进行设计

div

独占一行的大盒子，可以嵌套div，span，head，body，img…

span

一个小盒子

特殊字符

空格：&nbsp

小于号：&lt

大于号：&gt

按位与：&amp

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2025-06-18，如有侵权请联系 cloudcommunity@tencent.com 删除

input

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度

一篇文章快速学会HTML

一篇文章快速学会HTML

一篇文章快速学会HTML

HTML

head

title

body

DOM树

代码框架

HTML标签

注释标签

标题标签

段落标签

换行标签

格式化标签

加粗：

倾斜：

删除：

下划线：

img 标签

_src 属性

相对路径

绝对路径

其他属性

alt 属性

title 属性

width height 属性

border 属性

超链接标签

href 属性

target 属性

表格标签

table标签

thead tbody 标签

合并单元格

列表标签

无序列表

有序列表

自定义列表

表单标签

input

lable

select

textarea

无语义标签

div

span

特殊字符

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐