HTML

发表于 2017-11-29 | 分类于 HTML | 阅读次数:

什么是HTML?

HTML 是用来描述网页的一种语言。

Tag: Content 装内容装数据
CSS: Display 渲染,显示
JavaScript: Behavior 交互,行为

HTML 指的是超文本标记语言: Hyper Text Markup Language
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做web 页面

HTML格式

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>主题title>
</head>
<body>
    <h1>我的第一个标题</h1>
    <p>我的第一个段落。</p>
</body>
</html>

解析

<!DOCTYPE html> 声明为 HTML5 文档

元素是 HTML 页面的根元素

元素包含了文档的元（meta）数据

元素描述了文档的标题

元素包含了可见的页面内容

元素定义一个大标题

元素定义一个段落

水平分割线

折行符

_\ 下标标签

^\ 上标标签

\ 强调标签,变粗

\ 强调标签,斜体

列表

无序列表

<ul>
	<li>苹果</li>
	<li>草莓</li>
	<li>芒果</li>
</ul>

浏览器显示:

苹果
草莓
芒果

有序列表

<ol>
	<li>苹果</li>
	<li>草莓</li>
	<li>芒果</li>
</ol>

浏览器显示:

苹果
草莓
芒果

自定义列表

标签定义一个描述列表。

（定义项目/名字）和: （描述每一个项目/名字）一起使用。

<dl>
		<dt>星期</dt>
		<dd>1 2 3 4 5 6 7</dd>
		<dt>月份</dt>
		<dd>1 2 3 4 5 6 7 8 9 10 11 12</dd>
	</dl>

浏览器显示:

星期
1 2 3 4 5 6 7
月份
1 2 3 4 5 6 7 8 9 10 11 12

链接

1	<a href="url">链接文本</a>

href属性描述了链接的目标。

页面链接

当前页面跳转,target="_self"可以不写
<a href="http://www.baidu.com" target="_self">百度</a>
<a href="http://www.baidu.com">百度</a>
打开新页面跳转
<a href="http://www.qq.com" target="_blank">腾讯</a>

锚点链接(id属性)

id属性可用于创建在一个HTML文档书签标记。

id=”tips” tips-提示部分,自己定义

1
2
3

<h1 id="top">Hello,word!</h1>

<a href="#top">回顶部</a>

功能性链接

自动弹出发邮箱功能
<a href="mailto:fenghao1994@163.com">联系站长</a>
发起消息会话,wp.qq.com网站自动生成
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2::52" alt="联系客服" title="联系客服"/></a>

图像

定义图像的语法是:

1	<img src="url" alt="som_text" >

src 指 “source”。源属性的值是图像的 URL 地址,或图片的相对路径。

alt 为图像定义一串预备的可替换的文本。在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。

height（高度）与 width（宽度）属性用于设置图像的高度与宽度，属性值默认单位为像素，也可以不设置。

1	<img src="./mm.jpg" alt="这是一个女的" width="300" height="500">

表格

<table border="1"> 
  <caption>个人信息统计</caption>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>身高</th>
    th<th>体重</th>
  </tr>
  <tr>
    <td>王大锤</td>
    <td>20</td>
    <td colspan="2" align="center">170</td>
  </tr>
  <tr>
    <td>
      <img src="..jpg" width="60" height="20">
      <div>李小刀</div>
    </td>
    <td>18</td>
    <td>180</td>
    <td>58</td>
  </tr>
</table>

<caption> 定义表格标题

<th> 定义表格的表头

<tr> 定义表格的行

<td> 定义表格单元

align="center" 居中

colspan="" 合并

音频

<audio controls>
  <source src="horse.ogg">
  <source src="horse.mp3">
</audio>

controls 属性供添加播放、暂停和音量控件；可以换成autoplay 自动播放；autoplay loop自动循环播放。

元素可以链接不同的音频文件，浏览器将使用第一个支持的音频文件

视频

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
</video>

controls 元素提供了播放、暂停和音量控件来控制视频。

width 和 height 属性控制视频的尺寸.尽量不要写

区块

区块元素

大多数 HTML 元素被定义为块级元素或内联元素。

块级元素在浏览器显示时，通常会以新行来开始（和结束）。

实例:

,
,
, ,

内联元素

内联元素在显示时通常不会以新行开始。

实例: , , ,

元素

元素是块级元素，它可用于组合其他 HTML 元素的容器。

元素

元素是内联元素，可用作文本的容器

表单

表单用于收集不同类型的用户输入。表单是一个包含表单元素的区域。表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。表单使用表单标签 \

输入元素

多数情况下被用到的表单标签是输入标签（）。

输入类型是由类型属性（type）定义的。

文本域（Text Fields）

文本域通过标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。

<form action="" method="post" enctype="">
  <fieldset>
    <legend>必填信息</legend>
    <p>
      <label>用户名: </label>
      <input type="text" name="uid" placeholder="请输入用户名" required>
    </p>
    <p>
      <label>密码 </label>
      <input type="password" name="pwd">
    </p>
    <p>
      <label>性别: </label>
      <input type="radio" name="sex">男
      <input type="radio" name="sex" checked>女
    </p>
  </fieldset>
</form>

action “”里面是要提交的地址

method 规定如何发送表单数据（表单数据发送到 action属性所规定的页面）。共有两种方法：post 方法和 get 方法

— get

get是从服务器上获取数据
get是把参数数据队列加到提交表单的action属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到
get传送的数据量较小。
get安全性非常低。

— post
post是向服务器传送数据
post是通过HTTP post机制,将表单内各个字段与其内容放置在HTML HEADER内一起传送到action属性所指的URL地址。用户看不到这个过程。
post传送的数据量较大，一般被默认为不受限制。
post安全性较高。

enctype 属性规定在将表单数据发送到服务器之前如何对其进行编码。

注意：只有 method=”post” 时才使用 enctype 属性。

<fieldset></fieldset> 定义了一组相关的表单元素，并使用外框包含起来

<legend></legend> 定义了 \

元素的标题

<label> 定义了 \ 元素的标签，一般为输入标题

<input> 输入标签输入类型是由类型属性（type）定义的。

name 属性规定表单的名称,用于在 JavaScript 中引用元素，或者在表单提交之后引用表单数据。

placeholder 属性规定可描述输入字段预期值的简短的提示信息,该提示会在用户输入值之前显示在输入字段中。

注意：placeholder 属性适用于下面的 input 类型：text、search、url、tel、email 和 password。

required 属性是一个布尔属性,规定必需在提交表单之前填写输入字段。

注意：required 属性适用于下面的 input 类型：text、search、url、tel、email、password、date pickers、number、checkbox、radio 和 file。

密码字段

密码字段通过标签来定义

单选按钮

<input type="radio"> 标签定义了表单单选框选项

checked选框默认选项

复选框

定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项

<label>爱好: </label>
<input type="checkbox" name="fav">游戏
<input type="checkbox" name="fav" checked>阅读
<input type="checkbox" name="fav" checked disabled>旅游
<input type="checkbox" name="fav">运动
<input type="checkbox" name="fav">其他

checked disabled 默认必选项,不能取消.

文件上传

1	<input type="file" name="photo1" multiple>

multiple 可接受多个值的文件上传字段

日期

1	<input type="date" name="b">

下拉列表选项

<label>籍贯: </label>
<select>name="prov" 
  <option>北京</option>
  <option>上海</option>
  <option selected>四川</option>
  <option>云南</option>
  <option>海南</option>
</select>

selected 默认选项

多行文本框

标签定义一个多行的文本输入控件。文本区域中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小

字符实体

 	空格		&nbsp;
<	小于号		&lt;	
>	大于号		&gt;
&	和号		&amp;
"	引号		&quot;
'	撇号 		&apos; (IE不支持)
￠	分		&cent;
£	镑		&pound;	
¥	人民币/日元	
€	欧元		&euro;
§	小节		&sect;
×	乘号		&times;	
÷	除号		&divide;
© 	版权		&copy;
®	注册商标   &reg;
™	商标		&trade;

CSS

什么是 CSS?

CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明，声明总是以分号(;)结束，声明组以大括号({})括起来

就近原则
具体性原则 id选择器>类选择器>标签选择器>通配符选择器
重要性原则

盒子模型

1	content（内容） - padding（内边距） - border（边框） - background-image（背景图片） - background-color（背景颜色） - margin（外边距）

边框和轮廓

border 设置对象边框的特性

border-collapse : collapse 设置表格的边框合并为一个单一的边框

border-color 设置或检索对象的边框颜色

outline 设置或检索对象外的线条轮廓。

字体

font-size 设置字体属性

font-family 规定文本的字体系列

font-style 规定文本的字体尺寸

font-weight 规定字体的粗细

文本

color 指定文本的颜色

line-height 设置行高

text-align 规定文本的水平对齐方式

text-decoration 规定添加到文本的装饰效果，：none取消下划线

内边距

padding 简写属性在一个声明中设置所有填充属性。该属性可以有1到4个值

padding-bottom 设置元素的底填充
padding-left 设置元素的左填充
padding-right 设置元素的右填充
padding-top 设置元素的顶部填充

背景

div是不支持background-color 的，background-color是table等的属性，你要用background：#（这里是颜色代码）；这样来写

background 复合属性，设置对象的背景特性

background-color 设置或检索对象的背景颜色
background-image 设置或检索对象的背景图像

外边距

margin 在一个声明中设置所有外边距属性，该属性可以有1到4个值

display属性

display：none 此元素不会被显示。

display：block 此元素将显示为块级元素，此元素前后会带有换行符。

display：inline 默认。此元素会被显示为内联元素，元素前后没有换行符。

hidden 元素是不可见的。

列表

list-style 在一个声明中设置所有的列表属性
list-style-position 设置列表项标记的放置位置

定位

position:static; 正常文档流

position:relative; 相对定位相对于元素原来的位置定位没有脱离文档流,对兄弟元素没有影响

position:absolute; 绝对定位(相对于父元素来设置位置脱离了文档流

position:fixd； 固定定位（相对于浏览器窗口摆放）

z-index 属性指定一个元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

float：left 元素向左浮动。

float：right 元素向右浮动。

黑科技

overflow: auto; 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

overflow: hidden

兄弟选择器 ~

相邻兄弟选择器 +

安装字体
@font-face {
	font-family: '给字体起个名 ';
	src: url(路径);
}

JavaScript

ECMAScript - 语法规范 - ES5 (ECMA欧洲计算机制造商协会)

BOM - Browser Object Model - 浏览器对象模型 - window

DOM - Document Object Model - 文档对象模型 - document

编程范式(理念)

面向对象编程
函数式编程

层叠样式表前置, JS后置

外部脚本不能包含 \

什么是HTML?

HTML格式

解析

元素定义一个大标题 元素定义一个段落 水平分割线 折行符 \ 下标标签 \ 上标标签 \ 强调标签,变粗 \ 强调标签,斜体

列表

无序列表

有序列表

自定义列表

链接

页面链接

锚点链接(id属性)

功能性链接

图像

表格

音频

视频

区块

, , , , 内联元素 内联元素在显示时通常不会以新行开始。 实例: , , , 元素 元素是块级元素，它可用于组合其他 HTML 元素的容器。 元素 元素是内联元素，可用作文本的容器

表单

输入元素

文本域（Text Fields）

密码字段

单选按钮

复选框

文件上传

日期

下拉列表选项

多行文本框

字符实体

CSS

什么是 CSS?

边框和轮廓

字体

文本

内边距

背景

外边距

display属性

列表

定位

JavaScript

元素定义一个大标题

元素定义一个段落

水平分割线

折行符

_\ 下标标签

^\ 上标标签

\ 强调标签,变粗

\ 强调标签,斜体

,
,
, ,

内联元素

内联元素在显示时通常不会以新行开始。

实例: , , ,

元素

元素是块级元素，它可用于组合其他 HTML 元素的容器。

元素

元素是内联元素，可用作文本的容器