虾饺的学习笔记-HTML
虾饺的HTML学习笔记
Written By 虾饺
Based On 黑马
HTML概述:
-
HTML:
- HTML: Hyper Text Markup Language 超文本标记语言;
- 超文本: 比普通文本功能更加强大,可以添加各种样式;
- 标记语言:通过一组标签来对内容进行描述.由浏览器来解释执行.
-
示例：
<h1>静夜诗</h1>
<b><i>--李白</i> </b> <br/>
<p>床前明月光,</p>
<p>地上鞋两双,</p>
<p>举头望明月,</p>
<p>低头思故乡.</p>
-
HTML的主要作用:设计网页的基础,HTML5
-
HTML语法规范
<!DOCTYPE html>
<!--
1. 上面是一个文档声明
2. 根标签 html
3. html文件主要包含两部分. 头部分和体部分
头部分 : 主要是用来放置一些页面信息
体部分 : 主要来放置我们的HTML页面内容
4. 通过标签来对内容进行描述,标签通常都是由开始标签和结束标签组成
5. 标签不区分大小写, 官方建议使用小写
-->
1. 基础标签
- h: 标题;
- p: 段落;
- br: 换行;
- hr: 分割线;
- b: 加粗;
- i: 斜体;
- strong: 加粗,带语义;
- em: 斜体,带语义;
- font 常用属性:
- color:颜色;
- size:大小(范围:1~7);
- face:字体
基础标签代码案例
<!DOCTYPE html>
<html>
<!-- head部分，通常不显示在页面中 -->
<head>
<!-- 指定页面编码格式 -->
<meta charset="utf-8">
<!-- title的内容展示在浏览器选项卡中 -->
<title>基础标签代码案例</title>
</head>
<body>
<!-- h#: 标签，取值范围:1~6 -->
<h1>公司简介</h1>
<!-- hr： 水平分割线 -->
<hr>
<!-- p: 段落 -->
<p>段1</p>
<!-- font： 指定字体颜色大小等 -->
<p><font size="5" color="red" face="楷体">段2 楷体红色</font></p>
<!-- i： 倾斜 -->
<p><i>段3 倾斜</i></p>
<!-- b： 加粗 -->
<p><b>段4 加粗</b></p>
<!-- strong/em： 带语义的加粗/倾斜 -->
<p>段5 带语义的<strong>加粗</strong><em>倾斜</em></p>
</body>
</html>
2. 图片标签: img
- 常用属性
- src: 路径;
- width: 宽度;
- height: 高度;
- alt: 文件加载失败的警告
- 文件路径
./p1.jpg: 当前路径下的图片p1;./img1/p2: 当前路径下的img1文件夹内的图片p2;../p3.png: 上一级路径(父文件夹)下的图片p3;../img2/p4.png: 上一级路径下的img2文件夹下的图片P4;../../p5.jpg: 上上一级路径下的图片p5.
图片标签代码案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>img标签代码案例</title>
</head>
<body>
<!-- src: 路径; width: 宽度; height: 高度; alt: 文件加载失败的警告. -->
<img src="./p1.jpg" width="180px" alt="没能加载图片">
<!-- ./: 当前路径; ../: 上一级路径; ../../: 上上级路径.-->
<img src="./img/p2.JPG" >
<img src="../p3.jpg" width="30%" >
</body>
</html>
3. 列表标签与超链接标签
- 列表标签
- 无序列表标签 ul:
- li: 列表项标签;
- 常用属性:
- type: 列表标记类型.
- 有序列表标签ol常用属性:
- li: 列表项标签;
- 常用属性:
- type: 列表标记类型;
- start: 列表起始数值;
- reversed: 设置倒序.
- 无序列表标签 ul:
- 超链接标签: a
- 常用属性:
- href: 超链接.url,网络地址需要包含协议http(s);
- target: 打开方式,默认为self,即当前窗口打开.blank为新标签页打开.
- 常用属性:
列表与超链接标签代码案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表与超链接标签代码案例</title>
</head>
<body>
<!-- ul: 无序标签; type: 列表项前面的标记样式.-->
<ul type="square">
<!-- a: 超链接标签; href: 超链接对象,支持相对路径绝对路径和网络地址,当为网络地址时需要包含协议 -->
<li><a href="https://www.baidu.com">百度</a></li>
<li><a href="http://www.zhihu.com/">知乎</a></li>
<li><a href="./demo1.html"></a></li>
</ul>
<!-- ol: 有序标签; start: 序列起始数值; reversed: 设置倒叙-->
<ol type="A" start="7" reversed>
<li>苹果</li>
<li>索尼</li>
<li>三星</li>
<li>小米</li>
<li>锤子</li>
</ol>
</body>
</html>
4. 表格标签: table
- th: 表格表头标签;
- tr: 表格行标签;
- td: 表格列标签;
- 常用属性:
- border: 指定边框;
- width: 宽度;
- heigth: 高度;
- bgcolor: 背景色;
- align: 对齐方式.
- 常用属性:
- 单元格的合并属性:
- colspan: 跨行操作;
- rowspan: 跨列操作.
- 跨行或者跨列操作之后,被占掉的格子需要删除.
- 表格可嵌套.
表格标签代码案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格标签代码案例</title>
</head>
<body>
<!-- table: 表格; border: 边框; width/heigth: 宽/高度;
bgcolor: 背景色; align: 对齐方式;
cellspacing: 单元格边距; cellpadding: 单元格间距;
-->
<table border="3" cellspacing="5" cellpadding="30">
<tr bgcolor="darkorchid">
<th>第一列(表头)</th>
<td align="right">右对齐的第二列</td>
<td bgcolor="crimson">第三列</td>
</tr>
<!-- 单元格的合并: colspan: 跨行操作; rowspan: 跨列操作. -->
<tr>
<td rowspan="2">跨列操作的第二行</td>
<td colspan="2" align="center">跨行操作并设置居中</td>
<!-- 合并操作需要删除被合并的单元格<td>2X3</td> -->
</tr>
<!-- 表格可嵌套 -->
<tr>
<td>前跨列后嵌套</td>
<td>
<table border="" cellspacing="" cellpadding="">
<tr><td>表</td><td>格</td></tr>
<tr><td>嵌</td><td>套</td></tr>
</table>
</td>
</tr>
</table>
</body>
</html>
5. 表单标签: form
- 常用属性:
- action: 提交地址;
- method: 提交方式:
- get: 默认方式,有4k的大小限制,会将参数拼接在链接后面;
- post: 会将参数封装在请求体中,无大小限制.
- 表单元素: 表单标签里的元素标签:
- input:
- type: 指定输入项类型:
- text: 文本;
- password: 密码;
- radio: 单选按钮,同一个name下的radio只能选一个;
- checkbox: 复选框;
- file: 上传文件;
- submit: 提交按钮;
- button: 普通按钮;
- reset: 重置按钮;
- hidden: 隐藏域,网页内不可见,可用来随表单保留数据;
- date: 日期类型;
- tel: 手机号;
- number: 数字.
- value: 默认内容;
- placeholder: 默认提示信息;
- name: 表单提交时充当参数名称;
- id: 给输入项取名字,便于后期寻找与操作;
- type: 指定输入项类型:
- textarea: 文本域:
- cols : 宽度;
- rows : 高度.
- select: 下拉列表:
option: 选择项.
- input:
表单标签代码案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单标签代码案例</title>
</head>
<body>
<!-- 提交方式默认为get,但是表单内容可见,不安全,通常用post. -->
<!-- value: 默认内容; placeholder: 默认提示; name: 参数名称. -->
<form method="get">
<table align="right">
<tr><td colspan="2"><input type="hidden" name="bugaosuni" value="80088208820" /></td></tr>
<tr><!-- 单行文本输入 -->
<td>文本</td>
<td><input type="text" name="wenben" id="" placeholder="提示内容"/></td>
</tr>
<tr><!-- 密码输入时会被加密显示 -->
<td>密码</td>
<td><input type="password" name="mima" /></td>
</tr>
<tr><!-- 同一个name下的radio只能选一个 -->
<!-- 选择中的value在提交方式为post时标识了各个选项的名称 -->
<td>单选按钮</td>
<td><input type="radio" name="danxuan" value="nan"/>男 <input type="radio" name="danxuan" value="nv" />女</td>
</tr>
<tr><!-- checked可以设置选择按钮默认选中 -->
<td>复选框</td>
<td><input type="checkbox" name="fuxuan" value="chou" checked/>抽烟 <input type="checkbox" name="fuxuan" value="he"/>喝酒 <input type="checkbox" name="fuxuan" value="tang"/>烫头</td>
</tr>
<tr>
<td colspan="2"><input type="file" /></td>
</tr>
<tr>
<td>普通按钮</td>
<td><input type="button" name="putong" value="普通" /></td>
</tr>
<tr>
<td>下拉表单</td>
<td>
<select name="xiala">
<option>--请选择--</option>
<option>江</option>
<option>浙</option>
<option>沪</option>
</select>
</td>
</tr>
<tr>
<td>文本域</td>
<td>
<textarea rows="5" cols="30">原始内容</textarea>
</td>
</tr>
<tr>
<td><input type="reset" value="重置" /></td>
<td><input type="submit" value="提交" /></td>
</tr>
</form>
</body>
</html>
两种提交方式的结果
- get方式:
- post方式:
6. 框架标签: frameset
- 常用属性:
- cols: 按列划分页面;
- rows: 按行划分页面;
- src: 引入的html文件路径;
- name: 指定框架名称.
框架标签代码案例
<!DOCTYPE html>
<!-- 主demo文件 -->
<html>
<head>
<meta charset="UTF-8">
<title>框架标签代码案例</title>
</head>
<!-- 使用frameset标签必须删除body标签 -->
<!-- rows: 按列划分页面,"*"表示用完剩余空间 -->
<frameset rows="15%,*">
<frame src="./a.html" >
<!-- 框架可以嵌套 -->
<!-- cols: 按列划分页面 -->
<frameset cols="15%,*">
<frame src="./b.html" >
<!-- name: 指定框架名称 -->
<frame src="./c.html" name="main" >
</frameset>
</frameset>
</html>
<!-- a: 选项卡文件,删除了定义来确保table_height属性设定生效 -->
<html>
<head>
<meta charset="UTF-8">
<title>选项卡</title>
</head>
<body >
<table width="100%" height="100%" align="middle" bgcolor="red" >
<tr>
<!-- 超链接设置target属性来指定打开链接的方式 -->
<td width="25%" align="center"><a href="c.html" target="main"><font size="6">主页</font></a></td>
<td width="25%" align="center"><a href="c1.html" target="main"><font size="6">选项卡1</font></a></td>
<td width="25%" align="center"><a href="c2.html" target="main"><font size="6">选项卡2</font></a></td>
<td width="25%" align="center"><a href="c3.html" target="main"><font size="6">选项卡3</font></a></td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<!-- c: 超链接对象,单个选项卡网页文件 -->
<html>
<head>
<meta charset="UTF-8">
<title>单个选项卡网页</title>
</head>
<body bgcolor="blue">
<font size="25">主页选项卡!</font>
</body>
</html>
<!DOCTYPE html>
<!-- c1,c2,c3: 超链接对象,单个选项卡网页文件 -->
<html>
<head>
<meta charset="UTF-8">
<title>框架标签代码案例c1</title>
</head>
<body bgcolor="blue">
<font size="25">选项卡1!</font>
</body>
</html>
浙公网安备 33010602011771号