HTML的总结学习
一、什么是HTML？
HTML是用来描述网页的一种语言。
它是超文本标记语言(Hyper Text Markup Language)。
它不是编程语言，它是标记语言。
二、HTML标签
大多数html标签都是由一组开闭合标签组成的，但是有些html是单标签。
常用双标签：h1~h6标签，p标签，div标签 ，span标签等。
常用单标签：a标签 ，img标签等。
空元素标签：hr标签 br标签等。
script标签：script标签用于定于客户端脚本(javaScript)
2.1 标题标签h1~h6
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
结果：
2.2 段落标签P
<p>这是段落。</p>
<p>这是段落。</p>
<p>这是段落。</p>
结果：
2.3 超链接标签a
a标签定义超链接，用于从一张页面跳转到另一张页面
<a href="http://www.w3school.com.cn">百度</a>
结果:
（1）锚点的使用方法
1 href="#id"
<a href="#test">目录</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="test" style="height: 200px;width: 200px; border: 1px solid black;margin-bottom: 300px;">内容</div>
锚点只能识别id选择器 用class选择器不行。作用是快速定位到id="text"的元素位置。
三、HTML元素
块级元素：块级元素在浏览器显示时，通常会以新行来开始或结束。例：
div p ul table
内联元素：内联元素在显示时通常不会以新行开始。例：
b td a img span
四、HTML路径
（1）绝对路径：绝对路径是指向一个因特网文件的完整 URL。
绝对路径举例：<img src=‘D:\xxx\xxx\img.png’
绝对路径缺点：不灵活，如果在本地使用绝对路径 再发布到web服务器上，就得在web服务器上建立一个相同的路径文件夹。
（2）相对路径：相对路径指向了相对于当前页面的文件。
相对路径举例："<img src=’…/image/img.png’ "
使用“…/”来表示上一级目录，“…/…/”表示上上级的目录，以此类推。在把绝对路径转化为相对路径的时候，两个文件绝对路径中相同的部分都可以忽略，不做考虑。只要考虑他们不同之处就可以了。总之一句话就是，先用点点倒着回退到相同的目录下，然后再正着去找另外一个文件就对了。
五、HTML头部
《head》元素是所有头部元素的容器。《head》内的元素可包含脚本、指示浏览器在何处可以找到样式表，提供源信息等。
head标签里可包裹元素有：title、base、link、meta、script、style。
5.1 title元素
title元素能:
- 定义浏览器工具栏中的标题
- 提供页面被添加到收藏夹时显示的标题
- 显示在搜索引擎结果中的页面标题
5.2 link元素
link元素能：定义文档与外部资源之间的关系
link元素最常用于连接外部样式表
// 连接外部样式表
<head>
<link rel="stylesheet" type="text/css" href="../css/style.css">
</head>
5.3 style元素
style 元素内规定 HTML 元素在浏览器中呈现的样式
<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>
5.4 meta元素
meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。
一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引页面。
<meta name="百度" content="百度" />
5.5 script元素
用于定义客户端脚本。
六、HTML布局
通常使用div标签对网页进行布局。通常页面布局分为上中下 左中右 上左右下 三种。
6.1 html方式布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>html布局</title>
<link rel="stylesheet" href="../../css/buju.css">
</head>
<body>
<div>
<div class="header width">
<h1>City Gallery</h1>
</div>
<div class="body width">
<div class="sidebar">
<div>London</div>
<div>Paris</div>
<div>Tokyo</div>
</div>
<div class="content">
<h2>London</h2>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan
area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia, its history going back to
its founding by the Romans, who named it Londinium.
</p>
</div>
</div>
<div class="footer width">
<div>
Copyright W3School.com.cn
</div>
</div>
</div>
</body>
</html>
css部分
* {
margin: 0;
padding: 0;
}
.width {
width: 666px;
}
.header {
height: 90px;
line-height: 90px;
text-align: center;
background-color: black;
color: #fff;
}
.body {
display: flex;
}
.sidebar {
width: 110px;
height: 300px;
background-color: #eeeeee;
}
.content {
height: 300px;
width: 556px;
}
.footer {
color: white;
height: 30px;
text-align: center;
background-color: black;
}
成果：
6.2 html5新标签布局
HTML5 提供的新语义元素定义了网页的不同部分：
html代码部分：
使用新标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>html5布局</title>
</head>
<body>
<header class="width">
<h1>City Gallery</h1>
</header>
<nav class="height">
London<br />
Paris<br />
Tokyo<br />
</nav>
<section class="height">
<h1>London</h1>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</section>
<footer class="width">
Copyright W3School.com.cn
</footer>
</body>
</html>
css部分
* {
margin: 0;
padding: 0;
}
.width {
width: 666px;
}
.height {
height: 300px;
}
header {
background-color: black;
height: 90px;
line-height: 90px;
text-align: center;
color: white;
}
nav {
width: 110px;
background-color: #eeeeee;
float: left;
}
section {
width: 556px;
float: left;
}
footer {
background-color: black;
color: white;
clear: both;
text-align: center;
padding: 5px;
}
成果：
七、HTML实体
在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。
如果希望正确的显示小于号和大于号，要用到字符实体类。例：
八、HTML表单
form元素 定义html表单。表单用于收集不同类型的用户输入。
<form action="http://localhost:8080/user/login" method="post">
....
</form>
HTML表单包含表单元素：input元素、复选框、单选按钮、提交按钮等等。
(1)Action属性:
action 属性定义在提交表单时执行的动作。
向服务器提交表单的通常做法是使用提交按钮。
(2)Method属性:
method 属性规定在提交表单时所用的 HTTP 方法（GET 或 POST）：
8.1 input元素
input元素是最重要的表单元素。它有很多形态，根据不同的type属性，来改变不同的形态。
（1）type = “text”
用户名：<input type="text" placeholder="请输入用户名" />
结果：
(2) type=“password”
密码：<input type="password" placeholder="请输入密码" />
结果：
（3）type=“radio”
性别:<input type="radio" name="sex" value="male" checked >男孩
<input type="radio" name="sex" value="female">女孩
当type为radio时，要想进行单选。 name属性里的名字 必须一致
结果：
(4)type=“checkbox”
爱好:<input type="checkbox" />打篮球
<input type="checkbox" />踢足球
<input type="checkbox" />打羽毛球
结果：
（5） type=“button”
提交:<input type="button" value="提交">
结果：
（6）type=“submit”
提交按钮 同button.
8.2 select元素
select元素定义下拉框。
option元素定义带选择的选项
<select name="cars">
<option value="volvo" selected>沃尔沃</option>
<option value="saab">萨博</option>
<option value="fiat">福特</option>
<option value="audi">奥迪</option>
</select>
结果：
8.3 textarea元素
textarea定义多行输入字段（文本域）。
<form action="/demo/html/action_page.php">
<textarea name="message" rows="10" cols="30">The cat was playing in the garden.</textarea>
<br><br>
<input type="submit">
</form>
结果：
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
