HTML是什么:
(1) 超文本标记语言,是一种用于创建网页的标记语言,但它不是一种编程语言
(2) 本质上是浏览器可识别的规则,我们按照规则写网页,浏览器根据规则渲染我们的网页,对于不同的浏览器,对同一个标签可能会有不同的解释(兼容性问题)
(3) 网页文件的扩展名: .html或 .htm
基本的HTML文档格式:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8"> # 对于中文网页需要声明编码,否则会出现乱码,有的网页是GBK
<title>css样式优先级</title>
</head>
<body>
</body>
</html>
解释:
1.<!DOCTYPE html> 声明为HTML5 文档
2.<html> </html> 是文档的开始标记和结束的标记.是html页面的根元素,在它们之间是文档的头部(head)和主体(body)
3.<head> </head>定义了HTML文档的开头部分,它们之间的内容不会再浏览器的文档窗口显示.包含了文档的元(meta)数据
4.<title> </title>定义了网页标题,在浏览器标题栏显示
5.<body> </body> 之间的文本是可见的网页主体部分
Html标签:
标签语法: 1.<标签名 属性1=’属性值1’ 属性2 = ‘属性值2’…>内容部分</标签名>成对出现
2.<标签名 属性1=’属性值’ 属性2=’属性值2’…/> 单独出现
几个重要是属性:
- id:定义标签的唯一ID,HTML文档中唯一 相当于人的身份证
- class:为HTML元素定义一个或多个类名(classname)(css样式类名)
- style:规定元素的行内样式(CSS样式)
html注释:<--注释内容-->
head内常用标签:
|
<title></title> |
定义网页标题 |
|
<style></style> |
定义内部样式表CSS样式 |
|
<script></script> |
定义JS代码或引入外部JS文件 |
|
<link/> |
引入外部样式表文件CSS文件 |
|
<meta/> |
定义网页原信息 |
Meta标签介绍:
1.<meta>元素可提供有关页面的原信息,针对探索引擎和更新频度的描述和关键词
2.位于文档的头部,不包含任何内容
3.提供的信息是用户不可见的
Mate的属性:
1.http-equiv属性:相当于http的文件头作用,可以向浏览器传回一些有用的信息,以帮助正确的显示网页的内容,与之对应的属性值为content,content中的内容其实就是各个参数的变量值.
<!--2秒后跳转到对应的网址,注意引号-->
<meta http-equiv = ‘refresh’ content = ‘2;URL=https://www.oldboyedu.com’>两秒后跳转到XX网
<!--指定文档的编码类型-->
<meta http-equiv = ‘content-Type’ charset = ‘UTF-8’>
<!--告诉IE以最高级模式渲染文档-->
<meta http-equiv= ‘x-ua-compatible’ content = ‘IE=edge’>
2.name属性:主要用于描述网页,与之对应的属性值为content,content中的内容主要便于探索引擎机器人查找信息和分类信息用的
<meta name = ‘keywords’ content = ‘meta总结,html meta,meta属性’> keywords关键字
<meta name = ‘description’ content = ‘老男孩教育python学院’>
body 内常用标签
标签分类:
1.独占一行的 块儿级标签
1.<h1>标题1</h1> 一级标题 可以从一级到六级即 h1 h2 h3 h4 h5 h6
2.<p>段落标签</p>
3.<hr> 水平线标签
4.<div>内容</div>
5.<li>第一项</li> 有序/无序列表
6.<tr> </tr> 表格
2.在一行显示 行内标签/内联标签
1.<b>加粗</b>
2.<i>斜体</i>
3.<u>下划线</u>
4.<s>删除</s>
5.<a> </a> 超链接
6.<img > 图片
7.<span>内容</span> 没有实际的意义
3.换行标签: <br>
特殊字符:
空格 à > à > < à< &à& ¥à & 版权à © 注册à ®
div 标签和 span 标签
div标签:用来定义一个块级元素,并无实际意义,主要通过CSS样式为其赋予不同的表现
span标签:用来定义内联元素,并无实际意义, 主要通过CSS样式为其赋予不同的表现
块级元素和行内元素的区别:
1.块级元素是以另起一行开始渲染的元素,行内元素不需要另起一行.
2.如果单独在网页中插入这两个元素，不会对页面产生任何的影响。这两个元素是专门为CSS样式而产生的
标签的嵌套:标签可以嵌套标签
注意事项:
- 尽量不要用内联标签包块级标签
- p标签不能嵌套p标签
- p标签不能嵌套div标签
img标签:
用法:
<img src=’图片的路径’ alt = ‘图片未加载成功时的提示’ title =’鼠标悬浮时提示信息’ width=’宽’ height = ‘高(宽高两个属性只用一个会自动等比缩放)’>
a标签:超链接标签
解释:是指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置,还可以是一个图片,一个电子邮件地址,一个文件,甚至一个应用程序.
小知识点:
什么是URL？
URL是统一资源定位器(Uniform Resource Locator)的缩写，也被称为网页地址，是因特网上标准的资源的地址。
URL举例
http://www.sohu.com/stu/intro.html
http://222.172.123.33/stu/intro.html
URL地址由4部分组成
第1部分：为协议：http://、ftp://等
第2部分：为站点地址：可以是域名或IP地址
第3部分：为页面在站点中的目录：stu
第4部分：为页面名称，例如 index.html
各部分之间用“/”符号隔开。
用法:
<a href = ‘http://www.oldboyedu.com’ target =’_blank’>点我</a>
Href 属性指定目标网页地址,该地址可以有几种类型:
- 绝对URL-指向另一个站点(如 href =’http://www.baidu.com’)
- 相对URL-指当前站点中确切的路径(href = ‘index.html’)
- 锚URL-指向页面中的锚(href = ‘#top’) top就是某个id号
target:
1._blank表示在新标签页中打开目标网页
2._self 表示在当前标签页中卡开目标网页 不写默认_self
列表
1.无序列表:
<ul type = ‘disc’>
<li>第一项</li>
<li>第二项</li>
</ul>
Type属性:disc(实心圆点,默认值) circle(空心圆圈) square(实心方块) none(无样式)
2.有序列表:
<ol type =’1’ start = ‘2’> start:从几开始数
<li>第一项</li>
<li>第二项</li>
</ol>
Type属性:
1.1 数字列表,默认值
2.A大写字母
3.a小写字母
4. Ⅰ大学罗马
5.i 小写罗马
3.标题列表
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>
表格:
表格的基本结构:
<table border=’1’> ----à在这里添加属性
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>男</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>男</td>
</tr>
</tbody>
</table>
属性:border:表格边框
cellpadding:内边距
cellspaing:外边距
像素 百分百
rowspan:单元格竖跨多少行
colspan:单元格横跨多少行(即合并单元格)
------以上的内容是展示标签------
----以下的内容是获取用户输入的标签:------
form标签:一个容器,包住所有获取用户输入的标签
属性:
|
属性 |
描述 |
|
accept-charset |
规定在被提交表单中使用的字符集（默认：页面字符集）。 |
|
action |
规定向何处提交表单的地址（URL）（提交页面）。 |
|
autocomplete |
规定浏览器应该自动完成表单（默认：开启）。 |
|
enctype |
规定被提交数据的编码（默认：url-encoded）。 |
|
method |
规定在提交表单时所用的 HTTP 方法（默认：GET）。 |
|
name |
规定识别表单的名称（对于 DOM 使用：document.forms.name）。 |
|
novalidate |
规定浏览器不验证表单。 |
|
target |
规定 action 属性中地址的目标（默认：_self）。 |
form 表单提交数据的注意事项:
- form标签必须把获取用户输入的标签包起来
- form标签必须有action属性和method
- form中的获取用户输入的标签必须要有name属性
input标签
<input> (单独出现)
<input>元素会根据不同的type属性,变化多种形态
|
type属性值 |
表现形式 |
对应代码 |
|
text |
单行输入文本 |
<input type=text" /> |
|
password |
密码输入框 |
<input type="password" /> |
|
date |
日期输入框 |
<input type="date" /> |
|
checkbox |
复选框 |
<input type="checkbox" checked="checked" /> |
|
radio |
单选框 |
<input type="radio" /> |
|
submit |
提交按钮 |
<input type="submit" value="提交" /> |
|
reset |
重置按钮 |
<input type="reset" value="重置" /> |
|
button |
普通按钮 |
<input type="button" value="普通按钮" /> |
|
hidden |
隐藏输入框 |
<input type="hidden" /> |
|
file |
文本选择框 |
<input type="file" /> |
属性说明:
name:表单提交是的’键’,注意和id的区别
value:表单提交时对应项的值:
type="button", "reset", "submit"时，为按钮上显示的文本年内容
type="text","password","hidden"时，为输入框的初始值
type="checkbox", "radio", "file"，为输入相关联的值
checked:radio 和 checkbox默认被选中的项
readonly:text和password设置只读
disabled:所有input均适用
#在checkbox 和 radio 提交数据的时候,必须同时有name 和 value
<form action="http://127.0.0.1:8000" method="post">
<hr>
<input type="radio"name="a"value="nan"> 男
<input type = 'radio'name="a"value="sex">女
<input type="radio" name="a"value="bao"checked>保密
<hr>
<input type="checkbox"name="hobby"value="baskball">篮球
<input type="checkbox"name="hobby"value="foodball">足球
<input type="checkbox"name="hobby"value="ball">双色球
<input type="submit">
在text 和 password提交数据时:只需要有name
select标签
<form action=’http://127.0.0.1:800’ method=’post’>
<select name=’city’ id=’id1’>
<option value=’1’>北京</option>
<option value=’2’>上海</option>
<option value=’3’ selected=’selected’>深圳</option>
</select>
</form>
#提交数据时,必须有name value
属性说明:
multiple:布尔属性,设置后为多选,否则默认单选
disabled:禁用
selected:默认选中的该项
value:定义提交时的选项值
label标签:
定义:<label>标签为input元素定义标注(标记)
说明:
- label元素不会向用户呈现任何特殊效果
- <label>标签的for属性值应当与相关元素的id属性值相同
<form action=’http://127.0.0.1:8000’ method = ‘post’>
(1) <label for=’l1’>用户名</label>
<input type=’text’ id=’l1’ name = ‘haha’ value=’alex’ placeholder=’请输入用户名’>
(2) <label>
<input type=’password’ name=’pwd’>密码
</label>
<input type =’submit’>
</form>
textarea多行文本
<textarea name=’memo’ id=’l1’ cols=’30’ rows=’10’> 默认内容 </texarea>
属性说明:
name:名称 row:行数 cols:列数 disable:禁用