HTML
第一个网页
<html>
<head>
<title>第一个网页</title>
</head>
<body>
键盘敲烂，月薪过万
</body>
</html>
常用标签
标题标签
<h1> - <h6>
一级标签到六级标签
<h1>一级标题</h1>
段落标签
<p>文章段落会换自动行
<br /> 换行单标签
文本格式化标签
div和span标签
div 标签用来布局，但是现在一行只能放一个. 大盒子
span 标签用来布局，一行上可以多个. 小盒子
<div> 这是头部 </div>
<span> 今日价格 </span>
图像标签
<img src=“URL” />
标签的其他属性
相对路径
超链接标签
链接语法格式
<a href=“跳转目标” target=“目标窗口弹出方式”>某某链接</a>
| 属性 | 作用 |
|---|---|
| href | 用于指定拦截目标的url地址(必须属性) |
| target | 用于指定拦截页面的打开方式, _self为默认,当前窗口,_blank为新窗口打开 |
链接分类：
- 外部链接: 例如 < a href="http:// www.baidu.com "> 百度。
- 内部链接:网站内部页面之间的相互链接. 直接链接内部页面名称即可，例如 < a href=“index.html”> 首页 </a >。
- 空链接: 如果当时没有确定链接目标时，< a href="#"> 首页 </a > 。
- 下载链接: 如果 href 里面地址是一个文件或者压缩包，会下载这个文件。
- 网页元素链接: 在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接.
- 锚点链接: 点我们点击链接,可以快速定位到页面中的某个位置.
- 在链接文本的 href 属性中，设置属性值为 名字 的形式，如<a href="#two"> 第2集 -
- 找到目标位置标签，里面添加一个 id 属性 = 刚才的名字 ，如：<h3 id=“two”>第2集介绍
注释和特殊字符
注释
**HTML中的注释以“<!–”开头，以“ -->”结束。 **
<!-- 注释语句 -->
特殊字符
重点记住：空格 、大于号、 小于号 这三个， 其余的使用很少.
表格标签
表格显示数据 展示数据
表格语法
<table>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
</table>
th为表头, td为表体, 都包含着tr里
- <table> </table> 是用于定义表格的标签。
- <tr> </tr> 标签用于定义表格中的行，必须嵌套在 <table> </table>标签中。
- <td> </td> 用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。
- 字母 td 指表格数据（table data），即数据单元格的内容
| 属性名 | 属性值 | 描述 |
|---|---|---|
| align | left, center, right | 对其方式 |
| border | 1或"" | 边框大小,默认"",没有边框 |
| cellpadding | 像素值 | 单元边沿与内容直接的空白,默认为1,推荐0 |
| cellspacing | 像素值 | 单元格直接的空白, 默认为2, 推荐0 |
| width | 像素值或百分比 | 表格的宽度 |
| height | 像素值或百分比 | 表格的高度 |
案例1
<table align="center" border="1" cellpadding="0" cellspacing="0" width="500" height="249">
<tr><th>姓名</th> <th>性别</th> <th> 年龄 </th></tr>
<tr><td>刘德华</td> <td>男</td> <td> 56 </td></tr>
<tr><td>张学友</td> <td>男</td> <td> 58 </td></tr>
<tr><td>郭富城</td> <td>男</td> <td> 51 </td></tr>
<tr><td>黎明</td> <td>男</td> <td> 57 </td></tr>
</table>
单元格合并
- 跨行合并：rowspan=“合并单元格的个数”
- 跨列合并：colspan=“合并单元格的个数”
先确定跨行还是跨列, 确定合并数量, 将要合并的标签删掉, over
案例2
<table border="1" cellpadding="0" cellspacing="0" width="500" height="100" align="center">
<tr>
<th></th>
<th colspan="2"></th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
列表标签
无序列表
<ul> 标签表示 HTML 页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用<li> 标签定义。
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ul>
<ul>中只能嵌套<li>标签
有序列表
<ol>标签定义有序列表, <li>定义列表项
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ol>
自定义列表
<dl> 标签用于定义描述列表（或定义列表），该标签会与 <dt>（定义项目/名字）和 <dd>（描述每一个项目/名字）一起使用
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
</dl>
总结
| 标签名 | 定义 | 说明 |
|---|---|---|
| <ul></ul> | 无序列表 | 只能包含li标签, 没有顺序 |
| <ol></ol> | 有序列表 | 只能包含li,有顺序 |
| <dl></dl> | 自定义列表 | 只能包含dt 和 dd |
表单标签
表单域
<form action="url地址" method="提交方式" name="表单域名称">
各种表单元素控件
</form>
常用属性
| 属性 | 属性值 | 作用 |
|---|---|---|
| action | url地址 | 用于指定接收处理表单数据的服务器程序地址 |
| method | get/post | 用于设置表单数据的提交方式, 其取值为get或post |
| name | 名称 | 用于指定表单的名称, 以区分同一个页面中的多个表单域 |
表单的组成
在 HTML 中，一个完整的表单通常由表单域、表单控件（也称为表单元素）和 提示信息3个部分构成。
表单控件
input表单
<input type=“属性值” />
type属性的属性值
input的其他属性
input常用方式
- type="password"输入密码不显示
- type="radio"单选
- type="checkbox"多选
- value="信息"会在输入框中显示信息, 光标聚集信息仍然存在
- placeholder="信息"会在输入框中显示信息, 光标聚集信息消失
- 在多选或当选时name值一样
label标签
<label> 标签为 input 元素定义标注（标签）。
<label> 标签用于绑定一个表单元素, 当点击<label> 标签内的文本时，浏览器就会自动将焦点(光标)转到或者 选择对应的表单元素上,用来增加用户体验.
<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />
select表单
下拉标签
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
textarea表单
内容较多时,文本域
<textarea rows="3" cols="20">
文本内容
</textarea>
- 通过 <textarea> 标签可以轻松地创建多行文本输入框。
- cols=“每行中的字符数” ，rows=“显示的行数”, 实际开发中不会使用，都是用 CSS 来改变大小
总结
(1) 表单域 form 使用场景: 提交区域内表单元素给后台服务器
(2) 文件域 file 是input type 属性值 使用场景: 上传文件
(3) 文本域 textarea 使用场景: 可以输入多行文字, 比如留言板 网站介绍等
综合案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>综合案例-注册页面</title>
</head>
<body>
<h4>青春不常在，抓紧谈恋爱</h4>
<table width="600" >
<!-- 第一行 -->
<tr>
<td>性别:</td>
<td>
<input type="radio" name="sex" id="nan"> <label for="nan"> <img src="images/man.jpg" > 男 </label>
<input type="radio" name="sex" id="nv"> <label for="nv"><img src="images/women.jpg" > 女</label>
</td>
</tr>
<!-- 第二行 -->
<tr>
<td>生日:</td>
<td>
<select>
<option>--请选择年份--</option>
<option>2001</option>
<option>2002</option>
<option>2003</option>
</select>
<select>
<option>--请选择月份--</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select>
<option>--请选择日--</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</td>
</tr>
<!-- 第三行 -->
<tr>
<td>所在地区</td>
<td><input type="text" value="北京思密达"></td>
</tr>
<!-- 第四行 -->
<tr>
<td>婚姻状况:</td>
<td>
<input type="radio" name="marry" checked="checked">未婚 <input type="radio" name="marry"> 已婚 <input type="radio" name="marry"> 离婚
</td>
</tr>
<!-- 第五行 -->
<tr>
<td>学历:</td>
<td><input type="text" value="博士后"></td>
</tr>
<!-- 第六行 -->
<tr>
<td>喜欢的类型:</td>
<td>
<input type="checkbox" name="love" > 妩媚的
<input type="checkbox" name="love" > 可爱的
<input type="checkbox" name="love" > 小鲜肉
<input type="checkbox" name="love" > 老腊肉
<input type="checkbox" name="love" checked="checked"> 都喜欢
</td>
</tr>
<!-- 第七行 -->
<tr>
<td>个人介绍</td>
<td>
<textarea>个人简介</textarea>
</td>
</tr>
<!-- 第八行 -->
<tr>
<td></td>
<td>
<input type="submit" value="免费注册" >
</td>
</tr>
<tr>
<td></td>
<td>
<input type="checkbox" checked="checked"> 我同意注册条款和会员加入标准
</td>
</tr>
<tr>
<td></td>
<td>
<a href="#" > 我是会员，立即登录</a>
</td>
</tr>
<tr>
<td></td>
<td>
<h5>我承诺</h5>
<ul>
<li>年满18岁、单身</li>
<li>抱着严肃的态度</li>
<li>真诚寻找另一半</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
扫一扫
353
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
