html、一
标签（空格分隔）： html
作者:初学、小菜鸡
html是一种超文本标记语言
1.html网页基本结构以及基本标签
<!DOCTYPE html>
<!-- 头部声明 -->
<html>
<!--
标签大多都是成对存在的，属性只能跟标签配对使用
-->
<!-- 头部 -->
<head>
<!-- 设置字符编码 -->
<meta charset="utf-8" />
<!-- meta关键字 -->
<meta name="Keywords" content="关键字,帅气,英俊" />
<!-- 内容描述 -->
<meta name="Description" content="这是内容描述" />
<!-- 浏览器显示标题 -->
<title>第一个html网页</title>
</head>
<!-- 内容 -->
<body>
我是一只小菜鸟
<a name="上" href="#下">下</a>
<!-- 一级标题最大 六级最小 h标签默认黑体加粗 -->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<!-- 段落标签 -->
<!-- p标签默认为display：block -->
<p>这是一个段落标签</p>
<!-- 换行标签 -->
<!-- 换行标签是一个单标签 -->
<br />
<!-- 水平线标签 -->
<!-- 默认width：100% -->
<hr>
<!-- strong字体加粗标签 -->
<strong>字体加粗</strong>
<!-- em 斜体标签 -->
<br>
<em>这是斜体</em>
<br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br>
<!-- img图片标签 src属性值为路径 alt属性值为图像显示不出来时所代替的文字 title 鼠标悬停时所显示的文字 width 宽度 height 高度 -->
<img src="./img/li.jpg" alt="李清照图片" title="宋代女词人李清照" width="100px" height="100px">
<br>
<!-- 超链接标签 href 路径 target 链接在哪个窗口打开
_blank
浏览器总在一个新打开、未命名的窗口中载入目标文档。
_self
这个目标的值对所有没有指定目标的 <a>
标签是默认目标，它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。这个目标是多余且不必要的，除非和文档标题 <base> 标签中的 target属性一起使用。
_parent
这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中，那么它与目标 _self 等效。
_top
这个目标使得文档载入包含这个超链接的窗口，用 _top目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。
-->
<a href="人物简介.html" target="_blank">这是一个超链接</a>
<a href="#上" id="下">上</a>
<br>
<a href="mailto:1170679851@qq.com">联系我们</a>
</body>
</html>
| 特殊符号 | 字符实体 |
|---|---|
| 空格 | |
| 大于号(>) | > |
| 小于号(<) | < |
| 双引号(") | " |
| 版权符号(@) | © |
2.超链接target属性
- _blank
浏览器总在一个新打开、未命名的窗口中载入目标文档。- _self
这个目标的值对所有没有指定目标的 标签是默认目标，它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。这个目标是多余且不必要的，除非和文档标题 标签中的 target 属性一起使用。- _parent
这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中，那么它与目标 _self 等效。- _top
这个目标使得文档载入包含这个超链接的窗口，用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。
3.块级元素和行内元素
内联元素：
- 1、内联元素(inline)不会独占一行，相邻的内联元素会排在同一行。其宽度随内容的变化而变化。
- 2、内联元素不可以设置宽高
- 3、内联元素可以设置margin，padding，但只在水平方向有效。
块级元素：
- 1、块级元素会独占一行，默认情况下宽度自动填满其父元素宽度
- 2、块级元素可以设置宽高
- 3、块级元素可以设置margin，padding
内联块级元素：
- 简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现（可以设置宽高和margin值）。之后的内联对象会被排列在同一内联。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。
3.列表、表格与媒体元素
一、列表
无序列表
- 没有顺序(块级元素)
- 默认前面有个小圆心(html提供实心圆、实心方块、空心圆)
有序列表
- 有顺序(块级元素)
- 默认前面有顺序标记
定义列表
- 没有顺序
- 默认没有标记
- 一般用于一个标题下有多个列表项的情况
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表练习</title>
</head>
<body>
<ul>
<li>刘德华</li>
<li>梁朝伟</li>
<li>郑伊健</li>
</ul>
<ol>
<li>第一首歌</li>
<li>第二首歌</li>
<li>第三首歌</li>
</ol>
<dl>
<dt>水果</dt>
<dd>香蕉</dd>
<dd>苹果</dd>
<dd>橙子</dd>
<dd>鸭梨</dd>
<dt>蔬菜</dt>
<dd>白菜</dd>
<dd>土豆</dd>
<dd>菠菜</dd>
<dd>茄子</dd>
</dl>
</body>
</html>
二、表格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格练习</title>
</head>
<body>
<!-- boder 属性设置边框线 -->
<table border="1">
<!-- thead、tbody、tfoot表格分组操作使用 -->
<thead>
<!-- colspan属性设置跨n列 -->
<!-- th代表表头 其内的字符加粗 -->
<th colspan="3">
学生成绩
</th>
</thead>
<tbody>
<tr>
<!-- rowspan属性设置跨n行 -->
<td rowspan="2">张三</td>
<td>语文</td>
<td>98</td>
</tr>
<tr>
<td>数学</td>
<td>95</td>
</tr>
<tr>
<td rowspan="2">李四</td>
<td>语文</td>
<td>88</td>
</tr>
<tr>
<td>数学</td>
<td>91</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
<!-- cellspacing 属性设置 单元格与单元格之间的间距
cellpadding 属性设置单元格其内元素与单元格的内边距
-->
<table border="1" cellspacing="0" cellpadding="0">
<thead>
<th>总页面流量</th>
<th>攻击来访</th>
<th>会员</th>
<th>游客</th>
</thead>
<tbody>
<tr>
<td>1231</td>
<td>123</td>
<td>49645</td>
<td>1561</td>
</tr>
<tr>
<td>124</td>
<td>5435</td>
<td>6554</td>
<td>7645</td>
</tr>
<tr>
<td>534546</td>
<td>745</td>
<td>8768</td>
<td>988</td>
</tr>
<tr>
<td>平均浏览量</td>
<td colspan="3">1.58</td>
</tr>
</tbody>
</table>
</body>
</html>
三、媒体元素
视频元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
width : 设置宽度
height: 设置高度
controls: 显示控件
loop: 循环播放
autoplay: 自动播放
-->
<!--
source 元素从上到下匹配播放
-->
<video width="800" height="800" controls loop autoplay="autoplay">
<source src="img/vedio.mp4" type="video/mp4" />
<source src="video/video.mp4" type="video/mp4" />
</video>
</body>
</html>
音频元素
- 与视频元素类似，不再叙述
3.iframe内联框架
- iframe 是在html页面内嵌入框架 框架内可以连接另一个页面
它是在一个页面中嵌入一个框架窗口
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>iframe练习</title>
</head>
<body>
<!-- target设置目标窗口为框架窗口名 -->
<a href="http://www.baidu.com" target="ziFrame">百度</a>
<!-- iframe name属性为被主页面调用 -->
<iframe width="800" height="500" name="ziFrame" src="index.html"></iframe>
</body>
</html>
4.frameset
- frameset 在一个页面中设置一个或多个框架 不能嵌套在body标签里
它称为框架标记，是用来告知HTML文件是框架模式，并且设定可视窗口怎么分割- 属性
1、cols 它是把整个画面竖向分割成几个画面
2、rows 它是把整个画面横向分割成几个画面
3、frameborder 它表示设定这个框架的边框值。它的值只有两个0或者1.0表示不显示边框，1表示显示边框。
4、border 它表示了边框的宽度
5、bordercolor 它是设定了框架边框的颜色
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>index</title>
</head>
<frameset rows="15%,*" frameborder="no">
<frame src="top.html" noresize="noresize">
<frameset cols="20%,*">
<frame src="left.html" noresize="noresize" />
<frame src="right.html" name="Right"/>
</frameset>
</frameset>
</html>
top.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>上边</title>
</head>
<body bgcolor="yellow">
I' top
</body>
</html>
left.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>左边的页面</title>
</head>
<body bgcolor="green">
<a href="http://www.baidu.com" target="Right">百度</a>
<a href="http://www.dapenti.com" target="Right">打喷嚏</a>
<a href="http://www.mop.com" target="Right">猫扑</a>
<a href="http://www.cnbeta.com" target="Right">cneta</a>
<a href="http://www.51aspx.com" target="Right">51aspx</a>
</body>
</html>
right.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>右边</title>
</head>
<body bgcolor="red">
I'm right
</body>
</html>
5.表单
| 属性 | 说明 |
|---|---|
| type | 指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image 和 button，默认为 text |
| name | 指定表单元素的名称 |
| value | 元素初始值，type为radio时必须指定一个值 |
| size | 指定表单元素的初始宽度。当 type 为 text 或或password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位 |
| maxlength | type为text 或 password 时，输入的最大字符数 |
| checked | type为radio或checkbox时，指定按钮是否是被选中 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>人人网</title>
</head>
<body>
<img src="img/logo.png">
<p>人人网，中国 <strong>最真实、最有效</strong>的社会平台，加入<br>人人网，找回老朋友，结交新朋友。</p>
<!-- action属性表示向何处发送表单数据
method规定如何发送表单数据：get 参数可在浏览器中显示 post参数加密不显示
-->
<form action="111.html" method="post">
电子邮箱:
<!-- input标签type属性默认为text placeholder提示信息 -->
<input type="text" placeholder="请输入电子邮箱" />
<br><br>
设置密码:
<!-- type类型为password输入数据不显示，显示为实心圆 -->
<input type="password" />
<br><br>
真实姓名:
<input type="text">
<br><br>
性别：
<!-- radio 单选框 name相同是为同一个单选框 checked表示被选中 checked="checked"可简写为checked -->
<input type="radio" name="sex" value="man" checked="checked" />
男
<input type="radio" name="sex" value="woman" />
女
<br><br>
生日:
<!-- select标签为下拉菜单 option为下拉选项 optgroup为下拉选项分组-->
<select>
<option value="1991">1991</option>
<option value="1992">1992</option>
</select>
年
<select>
<option value="11">11</option>
<option value="12">12</option>
</select>
月
<select>
<option value="30">30</option>
<option value="31">31</option>
</select>
<br><br>
为什么要填写我的生日？
<br>
我现在:
<select>
<option value="0">请选择身份</option>
<option value="1">学生</option>
<option value="2">老师</option>
</select>(非常重要)
<br><br>
<img src="img/验证码.png">
<a href="#">看不清换一张？</a>
<br><br>
验证码:
<input type="text" />
<br><br>
<img src="img/同意条款.png">
<br>
<br>
<!-- 文本域 rows表示行数 cols表示显示的列数 -->
<textarea rows="10" cols="40">
阅读阿里巴巴公司（问里巴巴）服务条款协议（下称“本协议），您应当在使用服务之前认真阅读本协议全部内容，且对本协议中加粗字体显示的内容，|阿里巴巴督促您应里点阅读，本协议阐述之条款和条件适用于您使用间里巴巴中文网站（所涉城名为：Alibaba.com.cn、albaba.cn、1688.com.下同），所提供的在全球企业间（B-TO-B）电子市场（e-
market）中进行贸易和交流的各种工具和
</textarea>
<br>
<a href="#">阿里巴巴版权所有2015-2018著作权与商标声明</a>|
<a href="#">法律声明</a>|
<a href="#">服务条款</a>|
<a href="#">隐私声明</a>|
<a href="#">联系我们</a>|
<a href="#">网站地图</a>|
<a href="#">产品体检中心</a>
<br>
<br>
<!-- 图片按钮 -->
<input type="image" src="img/login.gif" />
<!-- 提交按钮 -->
<input type="submit" id="" name="" value="提交按钮" />
<!-- 重置按钮 -->
<input type="reset" value="重置" />
<!-- 按钮 -->
<input type="button" name="" id="" value="按钮" />
<button type="button"></button>
</form>
</body>
</html>
2019 年 07月 09日
扫一扫
1314
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
