HTML教程
基础概念辨析
html 超文本标记语言,不是一种编程语言,而是一种标记语言,是一套标记标签
HTML 文档包含了HTML 标签及文本内容,也叫做 web 页面
元素和属性都要尽量使用小写
当显示页面时,浏览器会移除源代码中多余的空格和空行。
基础元素解析
<!DOCTYPE html>
声明为 HTML5 文档<html>
元素是 HTML 页面的根元素<head>
元素包含了文档的元(meta)数据<title>
元素描述了文档的标题<body>
元素包含了可见的页面内容<h1>
元素定义一个大标题<p>
元素定义一个段落<a>
元素定义一个超链接<img>
元素定义一个图像<br>
换行<hr>
标签在 HTML 页面中创建水平线。<!-- 这是一个注释 -->
定义注释
标题(Heading)是通过
<h1> - <h6>
标签进行定义的。
html文本格式化
<b>("bold")
文本加粗<strong>
替换加粗标签<b>
<i>("italic")
文本倾斜<em>
替换倾斜<i>
标签<big>
放大<small>
缩小<sup>
上标<sub>
下标<del>
删除文字<ins>
下划线文字
html计算机输出标签
<code>
定义计算机代码<kbd>
定义键盘码<samp>
定义计算机代码样本<var>
定义变量<pre>
定义预格式文本
HTML 引文, 引用, 及标签定义
<abbr>
定义缩写<address>
定义地址<bdo>
定义文字方向<blockquote>
定义长的引用<q>
定义短的引用语<cite>
定义引用、引证<dfn>
定义一个定义项目。
html头部
<base>
标签描述了基本的链接地址/链接目标,该标签作为HTML文档中所有的链接标签的默认链接<link>
标签定义了文档与外部资源之间的关系,常用于链接到样式表css。<style>
标签定义了HTML文档的样式文件引用地址.在<style>
元素中你也可以直接添加样式来渲染 HTML 文档<meta>
元素通常用于指定网页的描述,关键词,文件的最后修改时间,作者,和其他元数据<script>
标签用于加载脚本文件
可以添加在头部区域的元素标签为
: <title>
,<style>
,<meta>
,<link>
,<script>
,<noscript>
和<base>
对于中文网页需要使用<meta charset="utf-8">
声明编码,否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码,则你需要设置为<meta charset="gbk">
。
html列表
<ol>
定义有序列表<ul>
定义无序列表<li>
定义列表项<dl>
定义列表<dt>
自定义列表项目<dd>
定义自定列表项的描述
html区块
<div>
块级元素,组合其他 HTML 元素的容器
如果与 CSS 一同使用,
<div>
元素可用于对大的内容块设置样式属性.<div>
元素的另一个常见的用途是文档布局
<span>
内联元素,文本的容器
当与 CSS 一同使用时,
<span>
元素可用于为部分文本设置样式属性。
html框架
<iframe src="URL"></iframe>
通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面。
html的URL
URL 是一个网页地址,URL可以由字母组成,如"runoob",或互联网协议(IP)地址: 192.68.20.50。
html字符实体
HTML 中的常用字符实体是不间断空格(
)。
基础属性解析
href
属性target
定义被链接的文档在何处显示class
为html元素定义一个或多个类名(类名从样式文件引入)id
定义元素的唯一idstyle
规定元素的行内样式title
描述了元素的额外信息 (作为工具条使用)src
源属性。src 指 “source”。源属性的值是图像的 URL 地址alt
属性用来为图像定义一串预备的可替换的文本
属性值应该始终被包括在引号内。
超链接可以是一个字,一个词,或者一组词,也可以是一幅图像
重点学习内容——表单form
- 表格由
<table>
标签来定义。 - 表格的表头使用
<th>
标签进行定义。 - 每个表格均有若干行(由
<tr>
标签定义),每行被分割为若干单元格(由<td>
标签定义) - 数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
- 边框属性
<border>
- 表单使用表单标签
<form>
来设置 - 多数情况下被用到的表单标签是输入标签(
<input>
) - 输入类型是由类型属性(
type
)定义的 <textarea>
定义文本域 (一个多行的输入控件)<label>
定义了<input>
元素的标签,一般为输入标题<fieldset>
定义了一组相关的表单元素,并使用外框包含起来<legend>
定义了<fieldset>
元素的标题<select>
定义了下拉选项列表<optgroup>
定义选项组<option>
定义下拉列表中的选项<button>
定义一个点击按钮
CSS教程
分类
- 内联样式- 在HTML元素中使用"style" 属性
- 内部样式表 -在HTML文档头部
<head>
区域使用<style>
元素 来包含CSS - 外部引用在文档头部使用
<link>
标签链接到样式表 - 使用外部 CSS 文件
CSS 规则
由两个主要的部分构成:选择器,以及一条或多条声明
选择器通常是您需要改变样式的 HTML 元素
每条声明由一个属性和一个值组成
CSS注释以 “/* " 开始, 以 " */” 结束
CSS 中 id 选择器以 “#” 来定义
CSS 中类选择器以一个点"."号显示(也可以指定特定的HTML元素使用class)
多重样式
- 如果某些属性在不同的样式表中被同样的选择器定义,那么属性值将从更具体的样式表中被继承过来。
- 一般情况下,优先级如下:内联样式)Inline style > (内部样式)Internal style sheet >(外部样式)External style sheet > 浏览器默认样式
注意:如果外部样式放在内部样式的后面,则外部样式将覆盖内部样式。
css盒子模型
CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。
Margin(外边距)
- 清除边框外的区域,外边距是透明的。
Border(边框)
- 围绕在内边距和内容外的边框。
Padding(内边距)
- 清除内容周围的区域,内边距是透明的。
Content(内容)
- 盒子的内容,显示文本和图像。
outline(轮廓)
是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用
计算公式
- 最终元素的总宽度计算公式是这样的:
- 总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
- 元素的总高度最终计算公式是这样的:
- 总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
分组选择器+嵌套选择器
分组:每个选择器用逗号分隔。
嵌套:选择器内部的选择器的样式。
JavaScript教程
JavaScript 使 HTML 页面具有更强的动态和交互性。
<script>
标签用于定义客户端脚本,比如 JavaScript。
<script>
元素既可包含脚本语句,也可通过 src 属性指向外部脚本文件。
<noscript>
标签提供无法使用脚本时的替代内容,比方在浏览器禁用脚本时,或浏览器不支持客户端脚本时。
<noscript>
元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。
更多推荐
html+css+JavaScript(菜鸟教程版本)学习笔记7.25
发布评论