1.html概述
html是一种超文本标记语言。
超文本：网页中显示的超链接，图片，视频等
标记：标签，记号，用来描述网页的主要内容，浏览器会根据标签内容进行解释执行
学习html的本质就是学习各种各样的标签，然后浏览器解析执行，实质上就是制作网页
一个基本的html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!-- 设置网页信息，编码设置 -->
<title>百度一下，你就知道</title>
<link href="img/baidu.ico" rel="icon"/>
<!-- 为标题加入图标 -->
</head>
<body>
<b> 百度</b>
<br>
<i> 新浪
<!--
标签，标签格式
-->
</body>
<html><!DOCTYPE html>——html版本
<html>——根标签
<head>——头部
<meta charset="utf-8" />——设置网页信息，编码设置
<body>——身体
2.html基本语法
注释：<!-- --> 快捷键：ctrl + /
标签：<标签名>标签内容<标签名>(闭合标签)
<标签名/>标签内容（自闭合标签）
标签属性：属性可以进一步对检查的内容进行修饰
格式为： 属性名=“属性值” 可以有多组
特殊字符转义: < : < > ：> 空格 :   注册： ® 版权：©
常用的标签：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>常用标签</title>
</head>
<body>
<!-- 段落标题 <p align="right">右对齐 <p align="center"> 中间对齐-->
<p align="right">
生于1979年的云风，在电脑还是稀罕玩意儿的20世纪80年代初，便成为了他的玩具。电脑没有显示器，用黑白电视接，将《儿童计算机世界》中的程序按步骤写入、运行，就是最好玩的事情。早期在 cfido 和水木清华 BBS 发表了多篇关于游戏制作的文章。1997 年开始维护的个人网站是最早用简体中文介绍游戏制作的网站之一，收录个人文章超过百万字，在游戏界颇有名气。
</p>
<p align="center">
因为游戏爱上编程，又因编程做好游戏，云风至今都在游戏与编程的世界中感受乐趣。如果让一个超过30年码龄的程序员对年轻人说点什么，他的建议是：想清楚再去做、多听别人的声音、抓住问题的本质、把复杂的问题简单化、看清事物也认清自己、做事情要专注、信任和你共事的人。
</p>
<!-- 标题标签 共6级 h1---h6 -->
<h1>
一级标题
</h1>
<h2>
<!-- <br/> 单行标签 -->
二级<br/>标题
</h2>
<h3>
三级标题
</h3>
<!-- 标尺线 <hr> 单行标签-->
<hr color="red" width="1000" align="center" size="20">
<!-- 列表 无序列表 <ul> 有序列表 <ol> -->
<ul type="circle">
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
<ol type="1">
<li>列表项1</li>
<li>列表项1</li>
<li>列表项1</li>
<li>列表项1</li>
</ol>
<!-- 超链接 <a> href为规定链接指向的页面的URL（页面地址也称统一资源定位符）-->
连接
<a href="https://www.csdn.net/" target="_self">
csdn
</a>
<br />
<a href="sina.html" target="_blank">新浪</a>
<br />
<!-- 图片 <img > src 为图片的地址 border 为图片添加边框 alt 为图片不能正常显示时所显现的内容-->
<img src="code/img/qq.ico" width="200" height="200" border="1" alt="腾讯官网" title="点击访问腾讯官网"/>
</body>
</html>
锚点：在网页中定义一个位置，触发之后可以精确的回到某个位置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 锚点：在网页中定义一个位置，可以精确来到网页中的某个位置 -->
</head>
<body>
<a name="top"></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>
<hr >
<h3>商品1</h3>
<a name="p1"></a>
<img src="img/1.png"/>
<hr >
<h3>商品2</h3>
<a name="p2"></a>
<img src="img/2.png"/>
<hr >
<h3>商品3</h3>
<a name="p3"></a>
<img src="img/3.png"/>
<hr >
<h3>商品4</h3>
<a name="p4"></a>
<img src="img/4.png"/>
<hr >
<h3>商品5</h3>
<a name="p5"></a>
<img src="img/5.png"/>
<a href="#top" style="position: fixed; right: 20px; bottom: 20px;" > 返回顶部</a>
</body>
</html>
3.表格
表格可以用来储存数据，还可以进行网页布局，由四组标签组成，且表格的内容只能放在单元格里
表格的基本标签：
table:表格标签
tr:表格中的行
th:表格中的表头，也是单元格，会自动加粗，居中
td:表格中的单元格
表格的标签及属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- cellpadding 内容到边框之间的距离 cellspacing 单元格与单元格之间的举例 -->
<!-- background 设置表格的背景图 bgcolor 设置表格的颜色 背景图片优先于背景颜色设置-->
<table bgcolor="antiquewhite" background="code/img/qq.ico" width="200" height="300" border="1" cellpadding="2" cellspacing="5">
<tr >
<th> 姓名</th>
<th> 数学</th>
<th> 语文</th>
<th> 英语</th>
</tr>
<!-- align 可加在单元格与行中，使选中内容位置水平方向改变 -->
<!-- valign 同上，使选中内容竖直方向发生改变 -->
<tr align="right">
<td valign="top">张三</td>
<td>80</td>
<td>90</td>
<td>100</td>
</tr>
<tr>
<td>李四</td>
<td>68</td>
<td>85</td>
<td>95</td>
</tr>
<tr>
<td>王五</td>
<td>56</td>
<td>75</td>
<td>38</td>
</tr>
</table>
</body>
</html>
表格的合成：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="1" width="400" height="500">
<!-- colspan="合并的数量"（横向） 从哪开始合并 colspan就在那添加 需要删除多余的单元格 -->
<!-- rowspan="合并的数量"（纵向） 从哪开始合并 rowspan就在那添加 需要删除多余的单元格 -->
<tr>
<td colspan="3"></td>
<td></td>
</tr>
<tr>
<td rowspan="3"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
4.表单
表单form标签：用来收集用户输入或选择的信息，并提交到服务器上
网页表单中有许多可输入或选择的组件，用户可以在表单中提交或选择用户信息，最终提交表单将客户端的数据提交至服务器。
表单中的各种标签和属性：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- <form > 表单 -->
<form >
<!-- input 输入 text 文本框 size 长度 readonly 只读 -->
<!-- password 密码框 -->
<!-- radio 单选 name属性值相同为一组 -->
<!-- checked 默认选中 -->
<!-- checkbox 多选 name属性值相同为一组 -->
<!-- file 选择文件 accept 筛选文件 -->
<!-- <select></select> 下拉选择框 -->
<!-- <option> 选项 selected 默认选中 -->
<!-- <textarea></textarea> 多行文本输入框 cols列 rows 行 -->
<!-- submit 提交按钮，会触发表单提交动作 value 修改按钮名字-->
<!-- seset 重置按钮 将表单还原成默认状态 -->
<!-- button 普通按钮，触发事件 -->
账号:<input type="text" size="20" /><br />
<!-- readonly="readonly" 只读 -->
密码:<input type="password" /><br />
性别:<input type="radio" name="xb" checked="checked"/>男
<input type="radio" name="xb" />女 <br />
爱好:<input type="checkbox" name="1" checked="checked" />写代码1
<input type="checkbox" name="1" />写代码2
<input type="checkbox" name="1" />写代码3
<input type="checkbox" name="1" />写代码4<br />
头像:<input type="file" accept=".png"/><br />
籍贯:<select >
<option selected="selected">陕西</option>
<option>山西</option>
<option>北京</option>
<option>上海</option>
</select><br />
备注:<textarea cols="10" rows="2"></textarea><br />
按钮:<input type="submit" value="登录"/><br />
<input type="reset" />
</form>
</body>
</html>
5.内联框架
内联框架可以在一个窗口中嵌入另一个子窗口，从而实现在子窗口引入一个外部页面
<iframe src="child1.html" name="child1" frameborder="1"></iframe>：
src=“嵌入页面的URL”
name=“框架名称”
frameborder=“是否展示子窗口边框0为否，1为是”
补充一下target属性：
target=“指定打开窗口的名称”
target="_parent"在父级窗口打开
target="_top"在最高级窗口打开
最高级窗口：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- target(属性)="指定打开的窗口的位置" target="_parent"在父级窗口打开 target="_top"在最高级窗口打开 ...="self"在当前窗口打开 ...="_blank"在新窗口打开 -->
<a href="http://127.0.0.1:8848/code%E4%BB%A3%E7%A0%81html/htmlproject/%E4%BD%9C%E4%B8%9A/%E6%9D%8E%E7%99%BD.html" target="child"> 李白</a><br />
<a href="http://127.0.0.1:8848/code%E4%BB%A3%E7%A0%81html/htmlproject/%E4%BD%9C%E4%B8%9A/%E4%B8%AA%E4%BA%BA%E7%AE%80%E5%8E%86.html"target="">个人简历</a>
<!-- iframe 内联框架可以在一个窗口中嵌入另一个窗口，从而在子窗口展示一个新页面 frameborder 是否展示子窗口边框0为否，1为是 -->
<iframe name="child" src="child.html" frameborder="1" ></iframe>
</body>
</html>
父级窗口：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
儿子<br />
<a href="http://127.0.0.1:8848/code%E4%BB%A3%E7%A0%81html/htmlproject/%E4%BD%9C%E4%B8%9A/%E6%9D%8E%E7%99%BD.html" target="_parent"> 李白</a>
<iframe src="child1.html" name="child1" frameborder="1"></iframe>
</body>
</html>
子级窗口：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
孙子
<a href="http://127.0.0.1:8848/code%E4%BB%A3%E7%A0%81html/htmlproject/%E4%BD%9C%E4%B8%9A/%E6%9D%8E%E7%99%BD.html" target="_parent"> 李白</a>
<a href="http://127.0.0.1:8848/code%E4%BB%A3%E7%A0%81html/htmlproject/%E4%BD%9C%E4%B8%9A/%E6%9D%8E%E7%99%BD.html" target="_top"> 李白</a>
</body>
</html>
扫一扫
3777
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
