HTML语法

基本结构

HEAD部分的HTML标签

标题标签

复制代码
<title>我的第一个html文件</title>

meta标签

复制代码
<meta charset="utf-8" />                       <!-- 设置本文档字符编码 -->

BODY部分的HTML标签

标题标签

复制代码
<h1>这是一级标题标签</h1>
<h2>这是二级标题标签</h2>
<h3>这是三级标题标签</h3>
<h4>这是四级标题标签</h4>
<h5>这是五级标题标签</h5>
<h6>这是六级标题标签</h6>

段落标签

复制代码
<p>这是一个段落标签</p>

换行标签

复制代码
<p>这是一个段落标签。<br>这个段落的内容是:如何更好的学习html</p>

图片标签

复制代码
<!--
图片标签属性:
src:图片地址
alt:图片的替代文字
title:鼠标悬停提示文字
-->
<img src="img/qiu.jpg" alt="秋天的景色" title="秋天的景色">

超链接标签

复制代码
<!--
超链接标签属性:
href:跳转路径
-->
<a href="http://www.baidu.com">跳转到百度</a>

超链接标签进行锚记

复制代码
<a href="#shuqian">书签</a>
<p>页面内容1</p>
<p>页面内容2</p>
<p>页面内容3</p>
<p>页面内容4</p>
<p>页面内容5</p>
<p>页面内容6</p>
<p id="shuqian">锚记点---页面内容7</p>
<p>页面内容8</p>

列表标签

无序列表

复制代码
<ul>
    <li>HTML语言</li>
    <li>CSS样式表</li>
    <li>javaScript语言</li>
</ul>

有序列表

复制代码
<ol>
    <li>HTML语言</li>
    <li>CSS样式表</li>
    <li>javaScript语言</li>
</ol>

定义列表

复制代码
<dl>
    <dt>HTML</dt>
    <dd>制作网页的标准语言,控制网页的结构</dd>
    <dt>CSS</dt>
    <dd>层叠样式表,控制网页的样式</dd>
    <dt>JavaScript</dt>
    <dd>脚本语言,控制网页的行为</dd>
</dl>

表格标签

复制代码
<table border="1">
    <tr>
        <th>第一列</th>
        <th>第二列</th>
    </tr>
    <tr>
        <td>这是第一行第一列</td>
        <td>这是第一行第二列</td>
    </tr>
    <tr>
        <td>这是第二行第一列</td>
        <td>这是第二行第二列</td>
    </tr>
</table>

表格合并

colspan:合并列

rowspan:合并行

复制代码
<table border="1">
    <tr>
        <td colspan="2">这是第一行第一列</td>
        <td>这是第一行第三列</td>
    </tr>
    <tr>
        <td rowspan="2">这是第二行第一列</td>
        <td>这是第二行第二列</td>
        <td>这是第二行第三列</td>
    </tr>
    <tr>
        <td>这是第三行第二列</td>
        <td>这是第三行第三列</td>
    </tr>
</table>

表单标签

from标签

复制代码
<form action="XXXX" method="get">
    ... ... ...
</form>

文本框

复制代码
<input type="text" placeholder="用户名" value="zhangsan" />

密码框

复制代码
<input type="password"/>

单选按钮

复制代码
<input type="radio" name="sex" value="0" checked="true"/>男
<input type="radio" name="sex" value="1"/>女

复选框

复制代码
<input type="checkbox" name="like" value="0" checked=" true" />读书
<input type="checkbox" name="like" value="1" />体育
<input type="checkbox" name="like" value="2" />游戏

下拉列表

复制代码
<input type="checkbox" name="like" value="0" checked=" true" />读书
<input type="checkbox" name="like" value="1" />体育
<input type="checkbox" name="like" value="2" />游戏

文件域

复制代码
<input type="file" name="files" />

文本域

复制代码
<textarea name="brief" rows="5" cols="30">--这里输入个人简介--</textarea>

提交按钮

复制代码
<!-- 将表单全部内容,提交给action属性指定的服务器。一个表单都应该有一个提交按钮。-->
<input type="submit" value="提交" />

重置按钮

复制代码
<input type="reset" value="重置" />

普通按钮

复制代码
<input type="button" value="点击我">
<button>点击我</button>

容器标签div与span

div标签

复制代码
<div>
    <h1>html语言</h1>
    <p>html语言是超文本标记语言</p>
</div>

span标签

复制代码
<p>今天气温<span>40</span>度</p>
相关推荐
魔云连洲6 分钟前
Vue的响应式底层原理:Proxy vs defineProperty
前端·javascript·vue.js
专注VB编程开发20年10 分钟前
CSS定义网格的列模板grid-template-columns什么意思,为什么要用这么复杂的单词
前端·css
BillKu16 分钟前
Java核心概念详解:JVM、JRE、JDK、Java SE、Java EE (Jakarta EE)
java·jvm·jdk·java ee·jre·java se·jakarta ee
IT_陈寒16 分钟前
Redis性能提升50%的7个关键优化策略,90%开发者都不知道第5点!
前端·人工智能·后端
Hilaku23 分钟前
深入URL和URLSearchParams:别再用正则表达式去折磨URL了
前端·javascript·代码规范
pubuzhixing27 分钟前
Canvas 的性能卓越,用它解决一个棘手问题
前端
weixin_4569042728 分钟前
Vue.jsmain.js/request.js/user.js/store/index.js Vuex状态管理项目核心模块深度解析
前端·javascript·vue.js
伍哥的传说32 分钟前
Vue 3.6 Alien Signals:让响应式性能飞跃式提升
前端·javascript·vue.js·vue性能优化·alien-signals·细粒度更新·vue 3.6新特性
永日4567036 分钟前
学习日记-HTML-day51-9.9
前端·学习·html
狗头大军之江苏分军1 小时前
iPhone 17 vs iPhone 17 Pro:到底差在哪?买前别被忽悠了
前端