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>
相关推荐
在云端易逍遥2 分钟前
前端必学的 CSS Grid 布局体系
前端·css
ccnocare3 分钟前
选择文件夹路径
前端
艾小码3 分钟前
还在被超长列表卡到崩溃?3招搞定虚拟滚动,性能直接起飞!
前端·javascript·react.js
闰五月4 分钟前
JavaScript作用域与作用域链详解
前端·面试
泉城老铁8 分钟前
idea 优化卡顿
前端·后端·敏捷开发
前端康师傅8 分钟前
JavaScript 作用域常见问题及解决方案
前端·javascript
司宸9 分钟前
Prompt结构化输出:从入门到精通的系统指南
前端
用户0332126663679 分钟前
Java 查找并替换 Excel 中的数据:详细教程
java
我是日安10 分钟前
从零到一打造 Vue3 响应式系统 Day 9 - Effect:调度器实现与应用
前端·vue.js