互联网中的三大基石
HTML(Hyper Text Markup Language)：超文本标记语言
HTTP(HyperText Transfer Protocol)：超文本传输协议
URL(Uniform Resource Location) ：统一资源定位符
HTML、CSS、JS之间的关系
html是主体，装载各种dom元素；
css用来装饰dom元素；
javascript控制dom元素。
HTML是什么？
HTML 是用来描述网页的一种语言。
- HTML 指的是超文本标记语言 (Hyper Text Markup Language)
- HTML 不是一种编程语言，而是一种标记语言 (markup language)
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
<meta charset="utf-8" />标签
告知浏览器此页面属于什么字符编码格式
<!DOCTYPE html>标签
指示 web 浏览器关于页面使用哪个 HTML 版本进行编写
<head> 标签
用于定义文档的头部，它是所有头部元素的容器。描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。
body 元素
定义文档的主体。包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）
标题标签及其属性
h1-h6 自动的加粗加黑 会自动的换行
align:调整标签的位置 （默认是left）
分割线标签常用属性
width和height：宽和高
color:颜色
align:位置（默认center）
size:垂直方向的大小
列表标签
无序列表始于 <ul> 标签。每个列表项始于 <li>
有序列表始于 <ol> 标签。每个列表项始于 <li> 标签
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始
HTML中的小标签
<u>:下划线
<sub>：下标
<i> ：斜体
<small>：字体变小
<b> ：加粗加黑
<big>：字体变大
<del>：删除线
<sup>：上标
下面有我自己在练习是所写的“乱码”操作哈哈哈，可以参考着看一下对应的输出结果，关于我编写HTML所用的软件是HBuilder，这个软件使用起来相对于notepad和notepad++更加的方便快捷，更加的灵活
展示一下 我练习时的测试代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--自动加黑加粗-->
zzzzzzzzzzzzzzzzzzzzzzzzzzzzzz
<h1 align="right">zzzzzzzzzzzzzzzzzzzzzzzzzzzzz</h1>
<h2 align="middle">zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz</h2>
<!--
作者：1468784581@qq.com
时间：2019-06-05
描述：分割线标签，500px像素
-->
<hr width="500px" color="brown" align="right" size="30px"/>
<!--
作者：1468784581@qq.com
时间：2019-06-05
描述：换行
-->
<p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz<br />zzzzzzzzzzzzzzzzzzzzzzzzz</p>
<pre>
zzzzzzzzzzzzz
zz
zzzzzzzzzzzzzzz
zzzzzzzzzzzzz
</pre>
<u>zzzz</u>
<i>zzzzz</i>
<del>zzzzzzz</del>
<b>zzzzzzz</b>
2<sup>3</sup>
log<sub>7</sub>
<small>zzzzzzzz</small>
<big>zzzzzzzzzzzz</big>
<font color="aqua" face="agency fb">zzzzzzzzzzzz</font>
<span>zzzzzzzzzzzz</span>
<ol>
<li>javase</li>
<li>javaee</li>
<li>javame</li>
</ol>
<dl>
<dt>java</dt>
<dd>javase</dd>
<dd>javaee</dd>
<dd>javame</dd>
</dl>
<marquee>zzzzzzzzzzzzzz</marquee>
</body>
</html>
emmmm......比较乱，不过大致的格式以及输出结果就是这样，欢迎请教。
下面写一下超链接以后的内容：
超链接标签
作用：
实现不同页面之间的跳转
href:指定跳转到目标资源的位置
target：打开网页的方式
实现锚点功能
格式：<a href= "http://www.***.com">*** </a>
图片标签
常用属性：
img (不会自动的换行)
src:引入图片的位置{相对路径、绝对路径、网络路径 }
title：图片的标题
border:图片的边框
alt：图片无法正常显示的时候显示的属性
align:图片的位置 ，必须有参照物
首先展示下我写的图片标签内的代码，我导入的两张图片，分别使用了相对路径、绝对路径、网络路径三种方法展示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a href="#">
<img src="img/abc.png" width="1000" title="十元" border="2px" height="700px" alt="图片显示错误" align="middle"/>
</a>
<img src="D:HBuilderHTMLstudy01HTMLimgabc.png" />
<img src="https://n.sinaimg.cn/news/transform/175/w105h70/20190605/230b-hxyuaph4841334.jpg" title="zzzzzzzzzz" width="400px"/>
<img src="img/a1.jpg" width="40px"/>
</body>
</html>展示结果大概就是这样的：
注意：src中可以有三种方式来加载图片，另外，如果出现图片加载不了的问题，首先检查一下自己的路径是否正确，另外如果自己的图片文件名中有乱码字符的，可能会导致系统识别不出来文件名，会发生错乱的情况，输出的结果就是内部服务器错误。这一点需要注意一下。
table标签
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
常用属性：
align整个的表格的位置
width表格的宽度
height表格的高度
cellpadding：内容和单元格的距离
cellspacing：单元格和单元格的距离
tr：行 :height
td/th：列 width
td:普通的列
th:标题列:自动的居中，加黑效果
colspan:列合并
rowspan：行合并
bgcolor：背景颜色
建表有两种方式，一种是相对复杂的，另一种是使用tab快捷键来建表：
普通的建表方式：
<table border="1px" align="center" cellpadding="20px" cellspacing="30px">
<tr height="100px">
<td width="100px" align="center">1</td>
<td>2</td>
<td>3</td>
</tr>
<tr height="100px" align="center">
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr height="100px">
<td>7</td>
<td></td>
<td></td>
</tr>另一种相对快捷的建表方式：
例如：table>tr*3>th*3 :声明3行3列的表格， 输入完指令后敲tab键会自动生成一个表格
HTML 表单
用于搜集不同类型的用户输入
<form> 元素
定义 HTML 表单
get和post：
GET:
(1)参数会依附于url地址之后
(2)利用get方式提交数据，数据的长度有限制
(3)利用get方式提交数据，是不安全的
Post
(1)请求不会依附于地址，
(2)利用post处理参数不受限制
(3）post提交数据比较安全
常用的表单属性：
<input type="text"> 定义用于文本输入的单行输入字段
<input type="radio"> 定义单选按钮。
<input type="submit"> 定义用于向表单处理程序（form-handler）提交表单的按钮。
<select> 元素定义下拉列表
<option> 元素定义待选择的选项
<textarea> 元素定义多行输入字段（文本域）
<button> 元素定义可点击的按钮
<input type="password"> 定义密码字段
<input type="checkbox"> 定义复选框
value 属性规定输入字段的初始值
readonly 属性规定输入字段为只读（不能修改）
disabled 属性规定输入字段是禁用的
size 属性规定输入字段的尺寸（以字符计）
maxlength 属性规定输入字段允许的最大长度
form 属性规定 <input> 元素所属的一个或多个表单。
height 和 width 属性规定 <input> 元素的高度和宽度
展示一个简单的表单编码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="body中的常用标签.html" method="post">
<input type="text" name="wd"/>
<input type="submit" value="百度一下"/>
</form>
</body>
</html>那么，运行结果就是这样的 ：
IFrame 标签
用于在网页内显示网页
iframe 元素会创建包含另外一个文档的内联框架（即行内框架）
Frameset 标签
frameset 元素可定义一个框架集。它被用来组织多个窗口（框架）。每个框架存有独立的文档。在其最简单的应用中，frameset 元素仅仅会规定在框架集中存在多少列或多少行。必须使用 cols 或 rows 属性
注意：不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用！不过，假如你添加包含一段文本的 <noframes> 标签，就必须将这段文字嵌套于 <body></body> 标签内。（在下面的第一个实例中，可以查看它是如何实现的。）
同样，展示一个简单的frameset的实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<frameset rows="150px,*,100px">
<frame src="admin/top.html"/ noresize="noresize">
<frameset cols="10%,*">
<frame src="admin/left.html"/>
<frame src="admin/right.html"/>
</frameset>
<frame src="admin/bottom.html"/>
</frameset>
<body>
</body>
</html>那么，运行结果是这样的：
注意：如果想让新建好的 frameset 中每一个网页大小不可改变，则需要在 <frame> 标签中加入：noresize="noresize"
div标签
<div> 可定义文档中的分区或节（division/section）。
<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。
如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效。
展示一个div标签应用实例，这个实例是做出了几部分的分支色块，比较的简单，可以看一下：、
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.top{
height: 100px;
width: 100%;
background-color:red ;
}
.tips{
width: 100%;
height: 40px;
background-color: pink;
}
.center{
width: 100%;
height: 475px;
background-color: cadetblue;
}
.bottom{
width: 100%;
height: 150px;
background-color: lightskyblue;
}
.login{
width: 350px;
height: 400px;
background-color: white;
position: relative;
left: 950px;
top: 10px;
}
</style>
</head>
<body>
<div class="top">
</div>
<div class="tips">
</div>
<div class="center">
<div class="login">
</div>
</div>
<div class="bottom">
</div>
</body>
</html>那么，运行的结果是这样的：
可以自己更改其中的值或者属性来实现不同的结果，比较的灵活。
第一部分就到这里。
扫一扫
5623
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
