1.概述
HTML（超文本标记语言）是构建网页的标准标记语言。它为网页提供结构和内容，允许开发者创建各种元素，比如文本、图像、链接、表格和表单等。是网页的基本骨架。
<!-- html骨架 -->
<html>
<!-- 网页中的根标签所有内容都写在此标签中 -->
<head>
<!-- 头标签 主要对网页做设置 -->
<meta charset="utf-8" />
<!-- 设置字符集 -->
<title>我的第一个网页</title>
<!-- 设置网页名称 -->
<link href="img/baidu.ico" rel="icon"/>
</head>
<body>
<!--
标签的写法
<开始标签> </结束标签> 闭合标签 双标签
<meta charset="utf-8" /> 自闭和标签 单标签 完成一个特定的设置功能 <标签名 属性="" />
<br/> 换行 单标签，完成一个功能
属性写在开始标签中，写在结束标签没有作用
一个标签可以有多个属性值
属性名="属性值"
-->
</body>
</html>2.常用标签
- 标题：使用
<h1>到<h6>定义不同级别的标题。 - 段落：使用
<p>定义段落。 - 链接：使用
<a>创建超链接。 - 图像：使用
<img>插入图像。 - 列表：有序（
<ol>）和无序（<ul>）列表。 - 表格：使用
<table>、<tr>、<td>和<th>定义表格。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 常用标签
标题标签 独占一行 h1-h6 大-小
<p/>段落标签
<br/>换行标签
<b>加粗文字<b/>
-->
<h1 align="right">1</h1>
<h2 align="right">2</h2>
<h3 align="left">3</h3>
<p>
段落<br />标签1
</p>
<p>
段落标签2
</p>
<b>加粗文字</b>
<!--
无序列表
ul包裹与其他列表区分
有序列表
ol包裹与其他列表区分 排序风格<ol type="A">通过ABCD排序，I通过罗马数字，1通过1234，
-->
<ul>
<li><a href="http://www.baidu.com">列表1</a></li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
</ul>
<ol type="A">
<li><a href="http://www.baidu.com">列表1</a></li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
</ol>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
href="链接地址"
target="打开方式" 默认 _self 本窗口打开 _blank 新建窗口
-->
<a href="http://www.baidu.com" target="_blank">百度</a>
<a href="http://www.baidu.com">百度</a>
<a href="demo.html">我的第一关网页</a>
</body>
</html>锚点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
超文本链接锚点
设置<a></a>为锚点，点击到想要的位置，本网页只需加#加上对应位置a标签的id即可
-->
<a id="a"></a>
<a href="#p1">图片1</a>
<a href="#p2">图片2</a>
<a href="#p3">图片3</a>
<a href="#p4">图片4</a>
<a href="#p5">图片5</a>
<h2><a id="p1"></a>图片1</h2>
<img src="img/1.png" alt="" />
<h2><a id="p2"></a>图片2</h2>
<img src="img/2.png"/>
<h2><a id="p3"></a>图片3</h2>
<img src="img/3.png"/>
<h2 > <a id="p4"></a>图片4</h2>
<img src="img/4.png"/>
<h2><a id = "p5"></a>图片5</h2>
<img src="img/5.png"/>
<h1><a href="#a">返回顶部</a></h1>
</body>
</html>
特殊符号转义
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<左括号
>右括号
空格
®圆圈r
©商标
™小TM
</body>
</html>表单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
表单：就一个区域,拥有许多输入和选择组件,
让用户可以输入选择信息,最终将数据提交到服务器端
<form action="server.html" method="get">
action="服务器地址" method="请求方式"
input
type="text" 单行文本输入框
name="account" 定义组件的名字 向后端提交用的
value="" 组件的值
readonly 设置组件只读 不能修改 提交表单时,可以被提交到服务器端
placeholder="请输入用户名" 输入框提示信息
disabled 禁用组件, 不会提交内容到服务器
type="password"密码框
type="radio" 单选框
选择性组件需要给value值
单选框通过name进行分组, name为相同为一组
checked属性可以默认选中一项
type="checkbox" 多选框 (复选框)
type="file" 文件选择框
<select name="province"> 下拉选择组件
<option>请选择</option> 选项
<option value="101">北京</option> 最终提交选中的选项值
多行文本框组件
-->
<form action="server.html" method="get">
账号<input type="text" name="account" value="" placeholder="请输入账号"/><br />
密码<input type="password" name="password" value="" placeholder="请输入密码"/><br />
性别<input type="radio"name="gender" value="男" checked/>男
<input type="radio"name="gender" value="女"/>女<br />
<input type="checkbox" name="course" value="java"/>java
<input type="checkbox" name="course" value="c"/>c
<input type="checkbox" name="course" value="sql"/>sql
<input type="checkbox" name="course" value="html"/>html<br />
<select name="area" >
<option value="1">请选择</option>
<option value="2">北京</option>
<option value="3">陕西</option>
<option value="4">深圳</option>
</select><br />
<input type="file" name="file"/><br />
<input type="submit" value="保存"/>
<input type="reset" value="清除"/>
</form>
</body>
</html>表格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
table 表格
cellpadding="0" 设置内容到 边框的内边距
cellspacing="0" 设置单元格与单元格之间的外边距
tr 表示表格中的一行
th 表头，加粗居中显示
td 表示一个普通单元格，左对齐显示 th td都是单元格
align="内容水平对齐方式" left(默认) center right
valign ="内容垂直对齐方式" top middle(默认) bottom
表格中的数据只可以写在表格中
-->
<table>
<tr>
<th>姓名</th>
<th>java</th>
<th>c</th>
<th>c++</th>
</tr>
<tr>
<td>任</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td>刘</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td>程</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
输入四行四列表格 table>tr*4>td*4
colspan="4" 合并列 从哪列开始合并,在哪列添加colspan="合并的数量" 记得删除多余的单元格
rowspan="3" 跨行合并单元格
-->
<table border="1" width="800">
<tr width="800">
<th colspan="2">品牌</th>
<th colspan="3">春</th>
<th colspan="3">夏</th>
</tr>
<tr width="800">
<th colspan="2"> </th>
<th>男</th>
<th>女</th>
<th>童</th>
<th>男</th>
<th>女</th>
<th>童</th>
</tr>
<tr width="800">
<th rowspan="2">jc</th>
<th>牛仔</th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
</tr>
<tr width="800">
<th>休闲</th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
</tr>
</table>
</body>
</html>
3187
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
