HTML是什么
HTML就是超文本标记语言（英语：HyperText Markup Language，简称：HTML），是一种用于创建网页的标准标记语言。
HTML 特点
- HTML 不是一种编程语言，而是一种简单的标记语言
- HTML的文档也叫做 web页面（网页）
- HTML文档只是一种简单的ASCII码文本，通过浏览器直接解释执行
HTML网页结构
这是一个可视化的HTML页面结构：
- 元素包含了文档的元（meta）数据，用来设置页面参数
- 元素包含整个页面的可见区域显示的内容
<html>
<head>
<title>页面标题<title/> // <title> 标签定义了不同文档的标题。
<head/>
<body>
<p>显示的内容<p/>
<body/>
<html/>
注意：只有 区域 (白色部分) 才会在浏览器中显示
HTML 标签（标记）
HTML 标记通常被称为 HTML标签 (HTML tag)。
把由“<>”括起来的部分统称为标签
- HTML 标签通常是成对出现的，比如
和
- 标签对中的第一个标签是开始标签（开放标签），第二个标签是结束标签（闭合标签）
- 也有特殊的标签，只有开头没有结尾，在开头后面加上“/”表示结尾，这种表签叫做单标签或者空标签，如
HTML 元素
由开始标签和标签中的内容和共同组成的整体，叫做一个元素。
如：
<body>
<h1>超文本标记语言</h1> // h1表示的是一级标题
<p>欢迎来到HTML的世界</p>
</body>
HTML标题
从大到小：<h1>-<h6>
标签 描述 例子
<h1> 一级标题 <h1>标题H1</h1>
<h2> 二级标题 <h2>标题H2</h2>
<h3> 三级标题 <h3>标题H3</h3>
<h4> 四级标题 <h4>标题H4</h4>
<h5> 五级标题 <h5>标题H5</h5>
<h6> 六级标题 <h6>标题H6</h6>
HTML 段落&换行
- HTML中文字一般都是写在标签里面的，普通文字用的标签就是段落P标签
- 在HTML中空格和换行标记都会被自动忽略，不会显示，因此需要使用换行标签
br来手动换行。
标签 描述 例子
<p> 普通文字标签（段落标签） <p>这是一个段落</p>
<br> 换行 <br/>
HTML <meta> 元素
meta标签描述了一些基本的元数据。
<meta>标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。- META 元素通常用于指定网页的描述，关键词，文件的修改时间，作者，和其他元数据。
- 元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务
例如：
<head>
<meta charset="utf-8" />
<title>文档标题</title>
<!--为搜索引擎定义关键词-->
<meta name="keywords" content="HTML超文本标记语言">
<!--为网页定义描述内容-->
<meta name="description" content="前端必备的基础技能">
<!--定义网页作者-->
<meta name="author" content="star">
<!--每5秒钟刷新当前页面-->
<meta http-equiv="refresh" content="5">
</head>
HTML属性
例子：
<body>
<h4 align="center">线的属性</h4>
<p align="center">宽度属性（width="300"）</p>
<hr width="300">
<p align="center">厚度属性（size="30"）</p>
<hr width="300" size="30">
<p align="center">颜色属性（color="green"）</p>
<hr width="300" size="30" color="green">
</body>
| 属性 | 值 | 描述 |
|---|---|---|
| align | left、center、right | 规定元素的对齐方式 |
| color | 颜色单词 | 规定元素的对齐方式 |
| size | pixels | 规定元素的高度 |
| width | pixels、% | 规定元素的宽度 |
HTML 字符实体
- HTML 中的预留字符必须被替换为字符实体。
- 一些在键盘上找不到的字符也可以使用字符实体来替换。
如：在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签
| 显示结果 | 描述 | 实体名称 |
|---|---|---|
| 空格 |   | |
| < | 小于号 | < |
| > | 大于号 | > |
| © | 版权 | © |
| ® | 注册商标 | ® |
| ™ | 商标 | &trade |
HTML 超链接
HTML使用标签 <a>来设置超文本链接。
- 超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
- 当把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。
- 在标签
<a>中使用href属性来描述链接的地址。 - 在标签
<a>中使用target="_blank"属性来设置在浏览器新标签页中打开页面。
| 属性 | 值 | 描述 |
|---|---|---|
| href | URL | 规定链接的目标 URL |
| target | _blank | 规定在浏览器新标签页中打开目标网页 URL。仅在 href 属性存在时使用 |
HTML图片
在 HTML 中，图像由<img> 标签定义。
- 是空标签，意思是说，它只包含属性，并且没有闭合标签
- 要在页面上显示图像，你需要使用源属性（src）。src 指 “source”。源属性的值是图像的 URL 地址
- 图片标签属性
| 显示结果 | 值 | 实体名称 |
|---|---|---|
| src | URL | 规定图片的目标URL |
| width | % / 值 | 规定图片的宽度 |
| height | % / 值 | 规定图片的高度 |
- 图片对齐方式
图片的对齐使用<img>标签的align属性控制
| 值 | 描述 |
|---|---|
| middle / center | 把图像与周围文字的中央对齐 |
| top | 把图像与周围文字的顶部对齐 |
| bottom | 把图像与周围文字的底部对齐 |
HTML表格
- 表格标签
| 标签 | 描述 |
|---|---|
<table> | 定义表格 |
<th> | 定义表格的表头 |
<tr> | 定义表格的行 |
<td> | 定义表格的单元 |
<caption> | 定义表格标题 |
<thead> | 定义表格的头部区域 |
<tbody> | 定义表格中间的主体部分 |
<tfoot> | 定义表格的底部区域 |
- table表格属性
| 属性 | 值 | 描述 |
|---|---|---|
| align | left 、center 、right | HTML5 不支持。HTML 4.01 已废弃。 规定表格相对周围元素的对齐方式 |
| bgcolor | rgb(x,x,x) 、#xxxxxx 、colorname | HTML5 不支持。HTML 4.01 已废弃。 规定表格的背景颜色。 |
| border | 1 、"" | 规定表格单元是否拥有边框。 |
| cellpadding | pixels | HTML5 不支持。规定单元边沿与其内容之间的空白。 |
| cellspacing | pixels | HTML5 不支持。规定单元格之间的空白。 |
| width | pixels 、% | HTML5 不支持。规定表格的宽度。 |
| height | pixels 、% | HTML5 不支持。规定表格的高度 |
- th、td单元格属性
| 属性 | 值 | 描述 |
|---|---|---|
| align | left 、right 、center 、justify 、char | HTML5 不支持。规定单元格内容的水平对齐方式。 |
| bgcolor | rgb(x,x,x) 、#xxxxxx 、colorname | HTML5 不支持。HTML 4.01 已废弃。 规定单元格的背景颜色 |
| colspan | number | 规定单元格可横跨的列数。Column |
| height | pixels 、% | HTML5 不支持。HTML 4.01 已废弃。 设置单元格的高度。 |
| rowspan | number | 设置单元格可纵跨的行数。Row |
| valign | top 、middle 、bottom 、baseline | HTML5 不支持。规定单元格内容的垂直排列方式。 |
| width | pixels 、% | HTML5 不支持。HTML 4.01 已废弃。 规定单元格的宽度。 |
HTML 框架
通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。
iframe语法:
<iframe src="URL"></iframe>
iframe属性：
| 属性 | 值 | 描述 |
|---|---|---|
| align | left 、right 、top 、middle 、bottom | HTML5 不支持。HTML 4.01 已废弃。 规定如何根据周围的元素来对齐 <iframe>。 |
| height | pixels | 规定 <iframe> 的高度。 |
| name | name | 规定 <iframe> 的名称。 |
| scrolling | yes 、no 、auto | HTML5 不支持。规定是否在 <iframe> 中显示滚动条。 |
| src | URL | 规定在 <iframe> 中显示的文档的 URL。 |
| width | pixels | 规定 <iframe> 的宽度。 |
HTML列表元素
- HTML列表有三种：无序列表、有序列表、自定义列表
| 标签 | 描述 |
|---|---|
<ul> | 定义无序列表 |
<ol> | 定义有序列表 |
<dl> | 定义自定义列表 |
<li> | 定义有序列表和无序列表的一个列表项 |
<dt> | 定义自定义列表的标题 |
<dd> | 定义自定义列表的内容 |
- 无序列表
| 标签 | 描述 |
|---|---|
<ul> | 定义无序列表 |
<li> | 定义有序列表和无序列表的一个列表项 |
无序列表有三种类型：
| 属性 | 描述 |
|---|---|
| type="circle" | 空心圆 |
| type="disc" | 实心圆 |
| type="square" | 实心方块 |
- 有序列表
| 标签 | 描述 |
|---|---|
<ol> | 定义有序列表 |
<li> | 定义有序列表和无序列表的一个列表项 |
有序列表有五种：
| 属性 | 描述 |
|---|---|
| type="1" | 定义数字序号 |
| type="a" | 定义有小写字母序号 |
| type="A" | 定义大写字母序号 |
| type="i" | 定义小写罗马序号 |
| type="I" | 定义大写罗马序号 |
- 自定义列表
| 标签 | 描述 |
|---|---|
<dl> | 定义自定义列表 |
<dt> | 定义自定义列表的标题 |
<dd> | 定义自定义列表的内容 |
HTML 区块内联元素
HTML的所有元素可以划分为区块元素和内联元素
| 内联元素 | 区块元素 |
|---|---|
| 宽度 \ 标签内容的宽度 | 和上级元素的宽度一样宽 |
| 高度 \ 标签内容的高度 | 标签内容的高度 |
| 显示 \ 多个内联元素显示在同一行 | 多个区块元素换行显示 |
| 控制 \ 宽高不可控制 | 宽高可控制 |
代表 \ <span>、<b>、<img>、<a> | <div>、<table>、<ul>、<li> |
最原始的区块元素是div，最原始的内联元素的span
HTML 表单
HTML 表单用于收集不同类型的用户输入。并且提交数据
- 表单是一个包含表单元素的区域。
- 表单元素是允许用户在表单中输入内容,如：
- 文本域(textarea)、
- 下拉列表、
- 单选框(radio-buttons)、
- 复选框(checkboxes)等等。
- HTML 表单标签
| 标签 | 描述 |
|---|---|
<form> | 定义供用户输入的表单 |
<input id=”” list=””> | 定义输入域 |
<textarea> | 定义文本域 (一个多行的输入控件) |
<label for=””> | 定义了 <input> 元素的标签，一般为输入标题 |
<fieldset> | 定义了一组相关的表单元素，并使用外框包含起来 |
<legend> | 定义了 <fieldset> 元素的标题 |
<select> | 定义了下拉选项列表 |
<optgroup label=“标题”> | 定义选项组 |
<option> | 定义下拉列表中的选项 |
<button> | 定义一个点击按钮 |
<datalist id=””>New | 指定一个预先定义的输入控件选项列表 |
- input属性值
| 值 | 描述 |
|---|---|
| button | 定义可点击的按钮（大多与 JavaScript 使用来启动脚本） |
| checkbox | 定义复选框。 |
| color | 定义拾色器。 |
| date | 定义日期字段（带有 calendar 控件） |
| datetime | 定义日期字段（带有 calendar 和 time 控件） |
| datetime-local | 定义日期字段（带有 calendar 和 time 控件） |
| month | 定义日期字段的月（带有 calendar 控件） |
| week | 定义日期字段的周（带有 calendar 控件） |
| time | 定义日期字段的时、分、秒（带有 time 控件） |
| 定义用于 e-mail 地址的文本字段 | |
| file | 定义输入字段和 “浏览…” 按钮，供文件上传 |
| hidden | 定义隐藏输入字段 |
| image | 定义图像作为提交按钮 |
| number | 定义带有 spinner 控件的数字字段 |
| password | 定义密码字段。字段中的字符会被遮蔽。 |
| radio | 定义单选按钮。 |
| range | 定义带有 slider 控件的数字字段。 |
| reset | 定义重置按钮。重置按钮会将所有表单字段重置为初始值。 |
| search | 定义用于搜索的文本字段。 |
| submit | 定义提交按钮。提交按钮向服务器发送数据。 |
| tel | 定义用于电话号码的文本字段。 |
| text | 默认。定义单行输入字段，用户可在其中输入文本。默认是 20 个字符。 |
| url | 定义用于 URL 的文本字段。 |
HTML 音视频
| 标签 | 描述 | 案例 |
|---|---|---|
<embed> | 音视频 | <embed height="50" width="100" src="horse.mp3"/> |
<object> | 音视频 | <object height="50" width="100" data="horse.mp3"></object> |
<audio> | 音频 | <audio controls> <source src="horse.mp3" type="audio/mpeg"> <source src="horse.ogg" type="audio/ogg"> 浏览器不支持 </audio> |
<video> | 视频 | <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> 您的浏览器不支持 video 标签 </video> |
css简介
-
什么是css？
CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一 -
CSS语法
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明
选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
CSS尺寸属性：
| 属性 | 描述 |
|---|---|
height | 设置元素的高度 |
line-height | 设置行高 |
max-height | 设置元素的最大高度 |
max-width | 设置元素的最大宽度 |
min-height | 设置元素的最小高度 |
min-width | 设置元素的最小宽度 |
width | 设置元素的宽度 |
CSS背景效果属性：
| 属性 | 描述 |
|---|---|
background | 背景的简写background:#ffffffurl('banner.jpg') no-repeat fixed centertop; |
background-color | 设置背景颜色（red、#00aaff、#0af、rgb(0,255,0)、rgba(0,255,0,1)） |
background-image | 设置背景图片（url(img/logo.png)） |
background-repeat | 设置背景图片是否重复（no-repeat、repeat） |
background-attachment | 设置背景图片是否固定（scroll、fixed） |
background-position | 设置背景图片的位置（left、right、top、bottom、center、%、px） |
background-size（不可合并） | 设置背景的大小（px、%、cover、contain） |
注意：background属性设置多个背景时，用逗号分隔开来。
CSS3 background-size 属性：
| 值 | 描述 |
|---|---|
length | 设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动) |
percentage | 将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)" |
cover | 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。 |
contain | 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。 |
CSS文本属性：
| 属性 | 描述 |
|---|---|
color | 设置文本颜色（纯文字） |
direction | 设置文本方向（ltr：[lefttoright]；rtl） |
unicode-bidi | 设置文本是否被重写（bidi-override） |
line-height | 设置文本行高（像素单位px，百分比单位） |
letter-spacing | 设置字符间距 （像素单位px，百分比单位） |
word-spacing | 设置字（单词间的空格）间距（像素单位px，百分比单位） |
white-space | 设置元素中空白的处理方式（pre：保留空格和换行；nowrap：不保留） |
vertical-align | 设置元素的垂直对齐（表格、图片、内联元素）（top、middle、bottom） |
text-align | 水平对齐元素中的文本（内联子元素）（left、right、center） |
text-decoration | 向文本添加上、中、下划线（overline、line-through、underline、none） |
text-indent | 缩进元素中文本的首行（像素单位px，百分比单位） |
text-shadow | 设置文本阴影（水平偏移、垂直偏移、模糊、颜色） |
text-transform | 控制元素中的字母（lowercase、uppercase） |
CSS white-space 属性：
| 属性 | 描述 |
|---|---|
normal | 默认。空白会被浏览器忽略。 |
pre | 空白会被浏览器保留。其行为方式类似 HTML 中的<pre>标签。 |
nowrap | 文本不会换行，文本会在在同一行上继续，直到遇到<br>标签为止。 |
CSS3 text-shadow 属性：
| 值 | 描述 |
|---|---|
h-shadow | 必需。水平阴影的位置。允许负值。 |
v-shadow | 必需。垂直阴影的位置。允许负值。 |
blur | 可选。模糊的距离。 |
color | 可选。阴影的颜色。 |
正在更新。。。。。。。
1289
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
