HTML
一、HTML文档的基本结构
基本结构
<!-- 声明当前文档是HTML5文档 -->
<!DOCTYPE html>
<!--html根元素,围堵标签 -->
<html>
<!--
head头元素:
作用:
1、用于指定HYML文章中的一些元数据:
例如meta:定义页面的编码格式
title:定义页面的标题
2、引入外部的资源文件
-->
<head>
<meta charset="utf-8" />
<title>这是我的第一个HTML页面</title>
</head>
<!--
body主体:
浏览器显示的内容都将在这里编写
-->
<body>
hello,html
</body>
</html>
HTML注释
语法:
<!-- 注释内容-->
二、HTML中常用标签
1.文本标签
1.1 标题标签 <h1>-<h6>:字体逐渐缩小
一般用在文章的标题上。
1.2段落标签<p>
一般用在正文
1.3换行标签<br/>
一般用在段落中强制换行
1.4水平线标签<hr/>
一般用来分割内容
1.5范围标签<span>
一般在大段内容中,为了突出部分内容的时候使用的标签,很少独立使用,一般嵌套在其他的标签中使用。
2.图片标签
2.1基本属性
2.2设置图片的热点区域–了解
3.列表标签
一般用在导航栏上
3.1无序列表、无序列表
3.2定义描述标签
一般用在图文混编的场景中
4.布局标签div
一般就是作为容器,盛放其他的标签,将其他标签组合在一起用来布局
5.标签分类
html标签可以分为块状元素和行级元素两类
**块状元素:**一般都是新起一行,可以容纳行级元素和其他块状元素
**行级元素:**一般都是语义级别的基本元素,一般只能容纳文本或者其他行级元素。
PS:简单区分方法:是否独占一行
区别:
- 块级元素会独占一行,其宽度自动填满父元素的宽度
行级元素会排列到同一行例,其宽度随元素的内容变化而变化。 - 块级元素可以设置宽高,行内元素设置宽高无效。
- 块级元素可以设置margin、padding属性;行内元素的水平方向的padding会有边距效果,但垂直方向上的padding没有效果。
我们将已经介绍过的标签进行归类:
块级元素:
- 标题标签:h1-h6
- 段落标签:p
- 水平线标签:hr
- 有序列表:ol
- 无序列表:ul
- 定义描述标签:dl-dt-dd
- 容器标签:div
行级元素: - 范围标签:span
- 图像标签:img
以后的根据特征再分类即可
三、超链接
超链接标签一般有两个作用:1、用来实现页面间的跳转 2、实现锚链接功能
1.页面间的跳转
2.锚链接
当一个页面长度超过一屏时,想迅速跳转到指定位置,就是用锚链接实现的。这个定位可以实现本页面间的锚链接,也是可以实现不同页面间的锚链接
2.1本页面的锚链接
2.2页面间的锚链接
四、表格标签
1.规则表格
cellpadding:表格内边距:单元格内文字与边框的距离
cellspacing:单元格与单元格之间的距离
2.不规则表格–跨行和跨列
3.表格的高级标签–标题标签和逻辑分区标签
五、表单(绝对重点)
概念:用于采集用户输入的数据,用于和服务器进行交互
表单项元素中的一些属性:
id:元素的唯一标识,不重复
name:表单项元素的名称,很重要–提交数据到服务器之后,服务器通过该名称获取数据
value:表单项元素的值,服务器获取数据通过name获取到的就是value
type:表示表单项元素的呈现形式
class:表示样式名称
readonly:表示只读,用户只能看不能改
disabled:表示禁用,该元素不能改且背景是灰色
5.1文本框
5.2密码框
5.3单选按钮
5.4复选框
5.5文件域
5.6日期-h5新特性
5.7隐藏域
5.8下拉列表框
5.9文本域
5.10按钮
提交按钮、图片按钮、重置按钮、普通按钮
button标签可以与Input实现的按钮相互替换
button没有image
5.11 label标签
5.12以上内容综合图
点击注册后因为get的关系,地址栏将发生变化,可以方便我们查看参数的传递情况
六、框架
6.1框架概念
通过使用框架,可以在同一个浏览器窗口中显示不止一个页面