HTML文档基础知识学习笔记-PHP培训十期线上班 学号：510251 12月19日作业
程序员文章站
2022-04-17 18:46:21
...
HTML文档基础知识学习笔记
1. 文档结构
<!doctype html> <!--文档声明--><html lang="zh-cn"> <!--根元素——所有内容要写到“<html></html>”中, <html>根元素中可设置网页的语言--><header><!--头元素给浏览器/搜索引擎看--><meta charset="utf-8"> <!--设置编码字符集--><title>我的第一个页面</title> <!--页面标题，显示到浏览器标题栏--></header><body><!--主体元素 用户看，并关心的--><h2 height="40" with="100" style="color: red">小梅</h2></body></html>
2. Html标签
2.1 Html5语义化标签
传统书写页眉：<div class="header">页眉</div>
语义标签书写页眉：<header>页眉</header>
传统书写页脚：<div class="footer">页脚</div>
语义标签书写页脚：<footer>页脚</footer>
传统书写主体：<div class="main"></div>
语义标签书写主体：<main></main>
传统书写文档：<div class="article"></div>
语义标签书写文档：<article></article>
传统书写边栏：<div class="aisde">广告位</div>
语义标签书写边栏：<aside>广告位</aside>
导航：<nav></nav>
片断：<section></section>
区块：<div></div>
注：语义化标签，有限
2.2 常用标签
| 序号 | 标签 | 描述 |
|---|---|---|
| 1 | <p> |
段落内容 |
| 2 | <pre> |
按源码格式原样显示 |
| 3 | <br> |
换行（源码中的换行会被解析来空格） |
| 4 | <span> |
与<div>类似，无语义，主要用做见容的样式钩子 |
2.3 语义化文本
| 序号 | 标签 | 描述 |
|---|---|---|
| 1 | <time> |
描述日期和时间 |
| 2 | <abbr> |
缩写 |
| 3 | <sub> |
下标 |
| 4 | <sup> |
上标 |
| 5 | <address> |
地址，通常用在<footer>中 |
| 6 |
<s>/<del>
|
删除线，<s> 无语义 |
| 7 | <code> |
显示代码块，通常与代码格式化插件配合，才能高亮关键字 |
| 8 | <progress> |
进度条 |
| 9 |
<b>/<strong>
|
加粗，<b>无语义 |
| 10 |
<i>/em
|
斜体，<i>无语义 |
| 11 | <mark> |
高亮标记，默认为内容添加黄色背景 |
| 12 |
<q>/<blockquote>
|
引用，内容加双引号 |
3.元素
3.1 图像元素
3.1.1 语法
<img src="images/1.jpg" alt="小狗" width="300" title="the dog">
3.1.2 属性
| 属性 | 描述 |
|---|---|
src |
图片来源地址, 可以是本地, 也可以是来自网络 |
alt |
图片描述信息, 当图片无法显示时, 显示该信息 |
width/height |
图片大小, 宽高只需设置一个,另一个会等比缩放 |
3.2 链接元素
3.2.1 语法
<a href="http://www.php.cn" target="_blank"></a>
3.2.1 属性
href属性: 跳转的目标地址
| 属性 | 描述 |
|---|---|
href="url" |
跳转的目标地址 |
href="mailto: 1815810057@qq.com" |
打开邮箱客户端,发送邮件 |
href="tel:183****9413" |
点击后,会询问用户是否要拨打电话 |
href="demo3.zip" |
浏览器不能解析的文档, 会直接下载 |
target属性: 在哪个窗口打开新页面,默认当前窗口
| 属性 | 描述 |
|---|---|
target="__self" |
当前窗口 |
target="_blank" |
新窗口 |
target="_parent" |
父窗口 |
target="_top" |
顶层窗口 |
target="name" |
指定名称的窗口 |
target="#anchor" |
跳转到设置了锚点的元素所在位置 |
-
注: 可以在任何元素上,通过
id属性来设置锚点,供<a>标签跳转使用 -
多个链接元素, 默认也是水平排列显示, 即通常所有行内元素
代码块：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>链接元素</title></head><body><!--href属性说明默认在当前窗口打开href指定的页面--><a href="https://www.php.cn"></a><!--zip 压缩包,会自动下载,不会打开--><a href="demo1.zip">下载文档</a><!--发电子邮件--><a href="mailto: 1183229557@qq.com">发邮件</a><!--拨打电话--><a href="tel: 183****9413">致电客服</a><!--锚点--><a href="#hello" target="_parent">锚点</a><!--需要加上高度, 才能直观的看到效果, 注意url地址最后会有#hello--><h1 id="hello" style="height: 1000px">Hello PHP中文网</h1><!--target属性说明--><!--默认在当前窗口打开href指定的页面--><a href="https://www.php.cn"></a><!--在当前窗口打开--><a href="https://www.php.cn" target="_self"></a><!--在新的窗口中打开--><a href="https://www.php.cn" target="_blank"></a><!--父页面,顶层页面--><!--因为当前页面没有父窗口,所以仍在当前窗口中打开--><a href="https://www.php.cn" target="_parent"></a></body></html>
效果显示：
3.3 列表元素
| 序号 | 标签 | 描述 |
|---|---|---|
| 1 | <ul>, <li> |
无序列表 |
| 2 | <ol>, <li> |
有序列表 |
| 3 | <dl>, <dt>,<dd> |
自定义列表 |
实例
代码块：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>列表元素</title></head><body><!--无序列表，最重要的使用场景，与链接标签配合，生成导航--><ul><li><a href="">首页</a></li><li><a href="">正在秒杀</a></li><li><a href="">Plus专享</a></li></ul><hr> <!--<hr>标签，水平分隔线--><!--有序列表--><h2>商品分类</h2><ol start="1" type="A"><li><a href="">电脑 / 办公</a></li><li><a href="">男装 / 女装 / 童装</a></li><li><a href="">男装 / 女装 / 童装</a></li><li><a href="">食品 / 生鲜 / 特产</a></li><li><a href="">图书 / 文娱 / 教育</a></li><li><a href="">母婴 / 玩具 / 乐器 </a></li></ol><!--可以通过对无序列表的项目符号CSS自定义实现，所以不常用--><hr><!--自定义列表：名词解释，常用在页脚或导航中--><h2>联系我们</h2><dl><dt>电话：</dt><dd><a href="tel:0511-6388**66">0511-6388**66</a></dd><dt>邮箱：</dt><dd><a href="mailto:admin@php.cn">admin@php.cn</a></dd><dt>地址：</dt><dd><address>中国.合肥.政务新区</address></dd></dl></body></html>
页面显示：
3.4 表格元素
3.4.1 数据标签
| 序号 | 标签 | 描述 |
|---|---|---|
| 1 | <table> |
声明表格, 必选 |
| 2 | <tr> |
定义表格中的行, 必选 |
| 3 | <th> |
定义表格头部中的单元格, 必选 |
| 4 | <td> |
定义表格主体中的单元格, 必选 |
3.4.2 结构标签
| 序号 | 标签 | 描述 |
|---|---|---|
| 1 | <option> |
定义表格标题, 可选 |
| 2 | <thead> |
定义表格头格, 只需定义一次, 可选 |
| 3 | <tbody> |
定义表格主体, 允许定义多次, 可选 |
| 4 | <tfooter> |
定义表格底, 只需定义一次, 可选 |
3.4.3 常用属性
| 序号 | 属性 | 所属标签 | 描述 |
|---|---|---|---|
| 1 | border |
<table> |
添加表格框 |
| 2 | cellpadding |
<table> |
设置单元格内边距 |
| 2 | cellspacing |
<table> |
设置单元格边框间隙 |
| 2 | align |
不限 | 设置单元格内容水平居中 |
| 2 | bgcolor |
不限 | 设置背景色 |
实例
代码块1：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>细说表格</title></head><body><table border="1" cellpadding="5" cellspacing="0" width="600" align="center"> <!--声明表格--><caption> <!--定义表格标题--><thead bgcolor="lightblue"> <!--表头，设置背景色 --><tr> <!--行--><th>编号</th> <!--th/td,单元格，th加粗，居中--><th>类别</th><th>名称</th><th>单价</th><th>数量</th><th>金额</th></tr></caption></thead><tbody align="center"> <!--表格主体，居中--><tr><td>1</td><td rowspan="2">3C</td> <!--rowspan="2",合并两行--><td>笔记本电脑</td><td>8900</td><td>1</td><td>8900</td></tr><tr><td>2</td><td>数码单反相机</td><td>13800</td><td>1</td><td>13800</td><!-- <td></td>--></tr><tr><td>3</td><td>服饰</td><td>冠军卫衣</td><td>1000</td><td>2</td><td>2000</td></tr></tbody><tfoot align="center"><tr><!-- <td colspan="3">合计：</td>--><td colspan="4">合计：</td> <!--colspan="4",合并4列--><!-- <td></td>--><!-- <td></td>--><td>4</td><td>24700</td></tr></tfoot></table></body></html>
页面显示1：
4 内联框架
-
内联框架: 就是在当前页面中, 再内嵌另一个页面
-
使用标签
<iframe>定义, 可以通过<a>和<form>标签的target属性触发和加载 -
内联框架中的内容不会被搜索引擎抓取, 影响SEO效果, 不适合前端展示,但适合后台管理页面
实例
代码块：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>内联框架</title></head><body><ul style="float: left;margin-right: 15px;"><li><a href="demo6.html" target="content">商品列表</a></li><li><a href="demo5.html" target="content">添加用户</a></li><li><a href="demo3.html" target="content">系统设置</a></li></ul><iframe srcdoc="<h2 style='color:green'>网站后台管理系统</h2>" frameborder="2" name="content" width="450" height="200"></iframe></body>
页面显示：
4 form表单
<form action="check.php" method="get">action="check.php"提交数据到哪method="get"提交数据方式，get地址栏发送，非敏感信息。分页，收藏post敏感信息。
4.1 文本框
语法：<input type="text" name="username" id="user">
4.2 密码
语法：<input type="password" name="password" id="psd">
4.3 下拉框
语法：
<select name="level" id=""><option value="">金牌会员</option><option value="" selected>银牌会员</option><option value="">铁牌会员</option><option value="">纸牌会员</option></select>
4.4 单选按钮
语法：
<label for="female">性别：</label><input type="radio" name="gender" id="male" checked><label for="male">男</label><input type="radio" name="gender" id="female"><label for="female">女</label>
4.5 复选框
语法：
<label for="">爱好：</label><input type="checkbox" id="shoot" name="hobby[]" checked><label for="shoot">摄影</label><input type="checkbox" id="play" name="hobby[]"><label for="play">旅行</label><input type="checkbox" id="running" name="hobby[]"><label for="running">跑步</label>
4.6 隐藏域
语法：<input type="hidden" name="user_id" value="101">
防止用户重复提交.