HTML学习
HTML学习
- HTML学习
- HTML简介
- 什么是 HTML?
- HTML 标签
- HTML 文档 = 网页
- HTML元素
- HTML 元素语法
- HTML 空元素
- HTML 提示:使用小写标签
- HTML标签
- HTML 标题
- 标题很重要
- 文本标签
- HTML 水平线
- HTML 注释
- HTML中的特殊字符
- HTML中的列表标签
- HTML中的块标签(div和span)css中重点使用
- HTML中的表格标签
- HTML中的表单标签
- CSS学习
- CSS的简介
- CSS与HTML的结合方式
- CSS使用方法
- CSS语法
- CSS选择器
HTML简介
什么是 HTML?
- HTML 是用来描述网页的一种语言。
- HTML 指的是超文本标记语言 (Hyper Text Markup Language)
- HTML 不是一种编程语言,而是一种标记语言 (markup language)
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
HTML 标签
- HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
- HTML 标签是由尖括号包围的关键词,比如
- HTML 标签通常是成对出现的,比如 和
- 标签对中的第一个标签是开始标签,第二个标签是结束标签
- 开始和结束标签也被称为开放标签和闭合标签
HTML 文档 = 网页
- HTML 文档描述网页
- HTML 文档包含 HTML 标签和纯文本
- HTML 文档也被称为网页
- doctype 声明是不区分大小写的,用来告知 Web 浏览器页面使用了哪种 HTML 版本。
- 在HTML 4.01 中,<!DOCTYPE> 声明需引用 DTD (文档类型声明),因为 HTML 4.01 是基于 SGML(Standard Generalized Markup Language 标准通用标记语言)。
- HTML 4.01 规定了三种不同的 <!DOCTYPE> 声明,分别是:Strict、Transitional 和 Frameset。
- HTML5 不是基于 SGML,因此不要求引用 DTD。
- 对于中文网页需要使用 声明编码,否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码,则你需要设置为 。
- 目前在大部分浏览器中,直接输出中文会出现中文乱码的情况,这时候需要在头部将字符声明为 UTF-8。
HTML元素
HTML的一个元素包括开始标签和结束标签:开始标签常被称为起始标签(opening tag),结束标签常称为闭合标签(closing tag)
HTML 元素语法
- HTML 元素以开始标签起始
- HTML 元素以结束标签终止
- 元素的内容是开始标签与结束标签之间的内容
- 某些 HTML 元素具有空内容(empty content)
- 空元素在开始标签中进行关闭(以开始标签的结束而结束)
- 大多数 HTML 元素可拥有属性
HTML 空元素
没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
< br >就是没有关闭标签的空元素(< br > 标签定义换行)。
在 XHTML、XML 以及未来版本的 HTML 中,所有元素都必须被关闭。
在开始标签中添加斜杠,比如 < br />,是关闭空元素的正确方法,HTML、XHTML 和 XML 都接受这种方式。
即使 < br > 在所有浏览器中都是有效的,但使用 < br /> 其实是更长远的保障。
HTML 提示:使用小写标签
HTML 标签对大小写不敏感:<P> 等同于 <p>。
许多网站都使用大写的 HTML 标签。
菜鸟教程使用的是小写标签,因为万维网联盟(W3C)在 HTML 4 中推荐使用小写,而在未来 (X)HTML 版本中强制使用小写。
HTML标签
HTML 标题
标题(Heading)是通过 <h1> - <h6>
标签进行定义的。
标题很重要
请确保将 HTML 标题 标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。
搜索引擎使用标题为您的网页的结构和内容编制索引。
因为用户可以通过标题来快速浏览您的网页,所以用标题来呈现文档结构是很重要的。
应该将 h1 用作主标题(最重要的),其后是 h2(次重要的),再其次是 h3,以此类推。
文本标签
释:<!-- 注释内容 -->
<h1> to <h6>:标题标签
1~h6:字体大小逐渐递减
<p>:段落标签
<br>:换行标签
<hr>:展示一条水平线
属性:
color:颜色
width:宽度
size:高度
align:对其方式
center:居中
left:左对齐
right:右对齐
<b>:字体加粗
<i>:字体斜体
<font>:字体标签
<center>:文本居中
属性:
color:颜色
size:大小
face:字体
属性定义:
color:
1. 英文单词:red,green,blue
2. rgb(值1,值2,值3):值的范围:0~255 如 rgb(0,0,255)
3. #值1值2值3:值的范围:00~FF之间。如: #FF00FF
width:
1. 数值:width='20' ,数值的单位,默认是 px(像素)
2. 数值%:占比相对于父元素的比例
HTML 水平线
<hr>
标签在 HTML 页面中创建水平线。
hr 元素可用于分隔内容。
HTML 注释
可以将注释插入 HTML 代码中,这样可以提高其可读性,使代码更易被人理解。浏览器会忽略注释,也不会显示它们。
注释写法如下:
HTML中的特殊字符
当需要使用符号时查看w3c文档即可!!!
HTML中的列表标签
- HTML中有两种列表标签分别为有序标签
<ol><li>
和无需排序<ul><li>
HTML中的块标签(div和span)css中重点使用
HTML中的表格标签
表格标签包括<table>标签,<tr>标签,<td>标签,<th>标签,<caption>标签
其中<table>
标签的属性有
- width:宽度
- border:边框
- cellspacing:单元格之间的距离,如果指定为0,则线为和为一条
- cellpadding:定义内容和单元格之间的距离
- bgcolor:背景色
- align:表格居中格式
<tr>标签
用来定义表格的行
- align:文本显示方式
- bgcolor:行背景颜色
<td>标签
:定义表格单元
- colspan:合并行
- rowspan:合并列
HTML中的表单标签
-
< form>标签:用于定义一个范围,范围代表采集用户数据的范围。
属性:
- action:规定当提交表单时向何处发送表单数据
- method:规定用于发送 form-data 的 HTTP 方法(get还是post)
- get:
- 请求参数会显示在地址栏中
- 参数长度有限制
- 不太安全
- post:
* 请求参数不会在地址栏中,会封装在请求体中
* 参数长度无限制
* 较为安全
- get:
-
标签:可以通过type属性值,改变元素展示的样式
-
type属性:
-
text:文本输入框,默认值
- placeholder:指定输入框的提示信息,当输入框的内容发生变化,会自动清空提示信息
-
password:密码输入框
-
radio:单选框
-
注意:
-
要想让多个单选框实现单选的效果,则多个单选框的name属性值必须一样。
-
一般会给每一个单选框提供value属性,指定其被选中后提交的值
-
checked属性,可以指定默认值
- checkbox:复选框
* 注意:
1. 一般会给每一个单选框提供value属性,指定其被选中后提交的值
2. checked属性,可以指定默认值- file:文件选择框
- hidden:隐藏域,用于提交一些信息。
- 按钮:
- submit:提交按钮。可以提交表单
- button:普通按钮
- image:图片提交按钮
- src属性指定图片的路径
-
-
label:指定输入项的文字描述信息
- 注意:
- label的for属性一般会和 input 的 id属性值 对应。如果对应了,则点击label区域,会让input输入框获取焦点。
- 注意:
-
select: 下拉列表
- 子元素:option,指定列表项
-
textarea:文本域
- cols:指定列数,每一行有多少个字符
- rows:默认多少行。
-
-
-
CSS学习
CSS的简介
CSS(Cascading Style Sheets)层叠样式表
CSS与HTML的结合方式
-
内联样式
如
<div style="color: red">hello world</div>
-
内部样式
在
<head>标签
内,定义<style>标签
,<style>标签
的标签体内就是CSS代码。 -
外部样式
- 创建一个.css后缀的CSS资源文件
- 通过标签定义,引入外部的资源文件
- 注意
- 1,2,3 种方式,CSS作用范围越来越大
- 1方式不常用,2,3更常用。
CSS使用方法
CSS语法
格式:
选择器 {
属性名1:属性值1;
属性名2:属性值2;
...
}
CSS选择器
- 选择器:筛选具有相似特征的元素
- 分类:
- 基础选择器
- id选择器:选择具体的id属性值的元素.建议在一个html页面中id值唯一
- 语法:#id属性值{}
- 元素选择器:选择具有相同标签名称的元素
- 语法: 标签名称{}
- 注意:id选择器优先级高于元素选择器
- 类选择器:选择具有相同的class属性值的元素。
- 语法:.class属性值{}
- 注意:类选择器选择器优先级高于元素选择器
- id选择器:选择具体的id属性值的元素.建议在一个html页面中id值唯一
- 扩展选择器:
-
选择所有元素:
- 语法: *{}
-
并集选择器:
- 选择器1,选择器2{}
-
子选择器:筛选选择器1元素下的选择器2元素
- 语法: 选择器1 选择器2{}
-
父选择器:筛选选择器2的父元素选择器1
- 语法: 选择器1 > 选择器2{}
-
属性选择器:选择元素名称,属性名=属性值的元素
- 语法: 元素名称[属性名=“属性值”]{}
-
伪类选择器:选择一些元素具有的状态
- 语法: 元素:状态{}
- 如:
- 状态:
- link:初始化的状态
- visited:被访问过的状态
- active:正在访问状态
- hover:鼠标悬浮状态
- 状态:
-
- 基础选择器
- 分类:
如果遇到具体问题可以访问W3Cschool进行学习。
感谢您的阅读,如果本篇文章对您有帮助,欢迎点赞,关注,您的阅读是我莫大的鼓励!
更多推荐
HTML与CSS详细介绍与基本语法
发布评论