HTML与CSS入门经典笔记

argin和padding属性--------用于添加元素周围的间距（顺时钟顺序，都是上右下左）

align和float属性--------用于将元素相对其它内容放置

text-align和vertical-align------------控制网页内容的对齐

边距在元素之外，填充在元素之内

1.margin 样式单边距此属性是处理元素外面的间距

可以设置边距为具体的长度（像素，点，ems）或者百分比。如是百分比，百分比是基于整个网页而不是元素大小的（margin-left=25%，表示元素的左边距将是整个页面宽度的25%）

margin属性包括margin-top;margin-right;margin-bottom;margin-left 分别是上,右,下,左边框的宽度值

2.padding 填充在元素的矩形区域内部添加空间

3.border-width 定义四个边框的宽度：

border-width:border-top-width border-right-width border-bottom-width border-left-width; 分别是上,右,下,左边框的宽度值

4.text-align样式使其元素在其定界区域内水平对齐

5.vertical-align属性使元素在垂直对齐。指定元素如何与其父元素对齐（在有些情况下，是与网页中元素的当前行对齐）。“当前行”指的是显示在元素内的元素所处的垂直位置，换句话说，就是内联元素。

属性取值

top:将元素的顶部与当前行对齐
middle:将元素的中心与当前行对齐
bottom:将元素的底部与当前行对齐
text-top:将元素的顶部与父元素的顶部对齐
baseline:将元素的基线与父元素的基线对齐
text-bottom:将元素的底部与父元素的底部对齐

6.float属性使元素能在设计中到处移动，从而让其他元素围绕它们。元素的浮动是水平而不是垂直方向的，只有两种可能值：right和left.使用这两个值时，浮动元素将浮动到容器元素所允许的最右或者最左.

7.clear属性清除浮动元素

取值：left,right,both,none ,inherit

8.盒子模型

边距（margin）--> 边框（border）-->填充（padding）-->内容（content）

9.position属性定位类型

relative:相对定位，默认定位类型。理解为棋盘上棋子的排列：棋子从左往右排列，达到边缘时移到下一行。棋子排列方式是由display决定。

样式属性display的值为block的元素自动放在下一行(默认)，而为inline的元素自动放在同一行，位于前一个元素后面

absolute:绝对定位，能够指定元素的矩形局域相对于父元素区域的位置

属性值：

left:左边的位置偏移

right:右边的位置偏移

top:顶部的位置偏移

bottom:底部的位置偏移

10.z-index属性控制元素的堆叠顺序。z-index值较大的元素在z-index值较小的元素上面

11.文本流（即内容流）控制的样式属性有如下：

float: 决定文本如何沿元素绕排可设置为left或right 如将图像的float属性设置为left，图像将放在文本的左边

clear:禁止文本沿元素绕排

overflow:在元素太小而不能包含所有文本时控制文本的溢出方式，可设置为visible,hidden,scroll

行一行的吸引人

表单呀表单

W3C标准

World Wide WebConsortium(万维网联盟)

成立于1994.web技术领域,最具权威和影响力的国际中立性技术标准机构

http://www.w3.org/

http://www.chinaw3c.org/

W3C标准包括

结构化标准语言(HTML,XHTML,XML)

表现标准语言(CSS)

行为标准(DOM,ECMAScript)

编辑工具

>记事本

>Dreamweaver

>WebStorm (企业主流)

基本结构

<!doctype html>

<html>

<head>

网页头部

</head>

<body>

网页主体

显示的网页主题内容

</body>

</html>

===========================================================

网页的基本标签

>标题标签

>段落标签

<p></p>

>换行标签

>水平线标签

<hr/>

>字体样式标签

>注释以及特殊代码

空格 &nbsp

大于号 &gt

小于号 &lt

引号 &quot

版权符号 &copy

>图像标签

常见的图像格式:JPG GIF PNG BMP

>超链接标签

<a href="path" target="_self ^ _blank">连接文本或头像</a>

>锚链接标签

实现由甲位置跳转到乙位置

>功能性链接

===========================================================

行内元素和块元素

行内元素排在一行

块元素独占一行<p></p> <h1></h1>

===========================================================

列表

>有序列表

<ul>

</ul>

>无序列表

<ul>

</ul>

>定义列表

<dl>

</dl>

===========================================================

表格

特点

简单通用

结构稳定

基本结构

行

列

单元格

</tr>

<tr>

</tr>

</tr>

</table>

===========================================================

网页中的媒体元素

如何实现在网页上播放视频和音频

1,第三方自主开发的播放器

2,FLash

3,HTML5媒体元素

视频元素

</video>

音频元素

</oudio>

===========================================================

iframe框架

===========================================================

表单

表单元素

>单选按钮 type="radio"

<from>

</from>

-----------------------------------------------------------

>复选框 type="checkbox"

<from>

<input name="名字" type="checkbox" value="选择值1" checked默认选中/>提示1

<input name="名字" type="checkbox" value="选择值2" checked默认选中/>提示2

<input name="名字" type="checkbox" value="选择值3" checked默认选中/>提示3

</from>

-----------------------------------------------------------

>下拉列表框

</select>

-----------------------------------------------------------

按钮

>重置按钮type="reset"

>提交按钮type="submit"

>button按钮

>图片按钮 type="image"

>文件域 type="file"

>邮箱type="emil"

>网址type="url"

>数字 type="number"

>滑块 type="range"

>搜索框 type="search"

表单元素的语法

method和action属性

常见的表单元素

input(text、password、radio、checkbox、submit、reset、email、url、number、range、search)、select、textare

===========================================================

表单的高级应用

>隐藏<input name="名字" type="text" value="值1" readonly/>

>禁用<input type="submit" value="保存" disabled/>

>标注

===========================================================

表单的初级验证

1,减轻服务器的压力

2,保证数据的可行型和安全性

>初级验证的方法

>placeholder属性(提示信息)

>required属性(必填项)

>pattern属性(符合正则表达式)

、系统结构：

① B/S架构：Browser/Server（浏览器/服务器的交互形式。）

Browser支持的语言：HTML、CSS、JavaScript；S是服务器端Server支持的语言有：C、C++、Java等
B/S架构系统有什么优点和缺点？ 优点：升级方便，只升级服务器代码即可，维护成本低。缺点：速度慢、体验不好、界面不炫酷
企业大部分使用B/S架构
B/S架构的系统代表有：京东、百度、天猫等

② C/S架构：Client/Server（客户端/服务器的交互形式。）

C/S架构的优点和缺点？
优点：速度快、体验好、界面炫酷（娱乐性多数是C/S架构）
缺点：升级麻烦、维护成本较高。
C/S架构的系统代表有：QQ、微信、支付宝等

2、 HTML概述

① 什么是HTML？② 怎么开发HTML？③ 怎么运行HTML?

① HTML：Hyper Text Markup Language（超文本标记语言）

•由大量的标签组成，每一个标签都有开始标签和结束标签。

•超文本：图片、声音、视频等

② HTML开发使用普通的文本编辑器就行，创建扩展名是.html或.htm

•编辑器有：HBuilder、vscode等

③ 直接采用浏览器打开HTML文件就能运行

④ HTML是谁制定的？

④ W3C：世界万维网联盟

•W3C制定了HTML的规范：每个浏览器生产厂家都会遵守规范。HTML也会按照规范去写代码

•HTML规范目前最高的版本是：HTML5.0，简称H5

•我们现在主要学的HTML4.0（基本用法）

为了方便中国Web前端程序员开发，提供了大量帮助文档。为开发提供方便。

•w3school：先出现的，和W3C无关

•w3cschool：后出现的，和W3C无关

•W3C制定了很多规范：HTML/XML/http协议/https协议……

3、第一个HTML

4、基本标签

p：段落标记
h1~h6：标题字，与word的标题字相同
br：换行标记（独目标记）
hr：横线（独目标记）
color：横线颜色
width：横线宽度（可以px和%）
pre：预留格式
del：删除字
ins：插入字（有下划线）
b：粗体字
i：斜体字
sup：上标
sub：下标
font：字体标签
color：字体颜色
size：字体大小（1~7）

页面效果图：

5、实体符号：为了避免和标签冲突，所以需要使用实体符号

<：<
>：>
空格：
注：html中按多个空格键，在网页中只显示一个空格。

6、HTML表格

table：表格
tr：行
td：列
th：列（比td加粗居中）
合并行：rowspan（一个格占两个位置）
注：row合并的时候，删除下面的单元格
合并列：colspan（一个格占两个位置）
注：col合并的时候，删除哪个没有要求

7、thead、tbody、tfoot标签

thead、tbody、tfoot不是必须的，便于后期JS编写。

8、body的背景颜色和背景图片

bgcolor：背景色
background：背景图片
背景图片在背景色的上面

9、img标签

src：图片的路径
只设置width，height会等比例缩放
只设置height，不起作用
title：鼠标悬停时显示的信息
alt：设置图片加载失败时显示的提示信息

10、超链接或热链接

href：hot references 热引用；
后面一定是一个资源的地址。
后面的路径可以是绝对路径也可以是相对路径，可以是网络某个资源的路径。
target：
_blank：新窗口
_self：当前窗口（默认）
_top：顶级窗口
_parent：父级窗口

超链接的作用：

通过超链接可以从浏览器向服务器发送请求。

11、request与response的概念

request：浏览器向服务器发送数据（请求）
B --》S
response：服务器向浏览器发送数据（响应）
S--》B

12、列表

有序列表：ol
type：1、A、a、I、i
无序列表：ul
type：circle（○）、square（□）、disc（●）

13、表单（重点）

action：写提交的URL地址
method：默认get；还有post
表单有什么用？
答：收集用户的信息。表单展现之后，用户填写表单，点击提交。（submit）
怎么画一个表单？
答：用form标签
一个网页可以有多个表单form
表单最终是需要提交数据给服务器的，form标签有一个action属性，这个属性用来指定服务器地址。
action属性用来指定数据提交给哪个服务器
action属性和超链接中的href属性一样。都可以向服务器发送请求（request）
http://192.168.111.3:8080/oa/save 这是请求路径，
表单提交数据最终提交给192.168.111.3机器上的8080端口对应的软件。
input中的type取值:
radio：单选控件
checkbox：多选控件
submit：提交控件
reset：重置控件
button：普通控件
text：文本控件
password：密码控
file：文件控件
上传文件专用
hidden：隐藏域
网页上看不到，但是表单提交的时候数据会自动提交给服务器。
input中的value属性用来指定按钮上显示的文本信息。
超链接a与表单form的区别？
答：表达form可以收集信息，而超链接a无法收集信息。
表单提交里面的按钮input中属性必须定义name，不然提交不了。
表单是以什么格式提交数据给服务器的？
格式：action?name=value&name=value&name=value..
HTTP协议规定的，必须以这种格式提交给服务器
java中String split('&');
重点强调：表单项写了name属性的，一律会提交给服务器。不想提交就不要写name属性。
文本框和密码框的value不需要程序员指定，用户输入什么value就是什么。
当name没有写的时候，该项不会提交给服务器
但是当value没有写的时候，value的默认值是空字符串"",将空字符串提交给服务器。java代码得到的是：String s = "";

效果图：

地址栏提交的信息：

?username=abc&userpassowrd=1234&sex=1&aihao=study&aihao=dream&myText=我没有value属性；&position=ln&myFile=&myHidden=

14、表单的说明：

① 用户手动输入的文本框，都不需要给value赋值
② textarea没有value属性
③ radio、checkbox默认选项需要使用，checked="checked"（简写：checked）
④ select中的option属性：• selected="selected" 为默认选中 •size：显示条目数量
multiple="multiple" 支持多选(select的属性)
⑤ input的属性
readonly和disabled：
都是只读不能修改
数据不会提交
maxlength：设置文本框中输入的字符数量。

15、HTML中的结点

在HTML文档中，任何元素（结点）都有id属性，id属性是该节点的唯一标识。所以在同一个HTML文档中id值不能重复。
注意：表单提交数据的时候，只和name有关系，和id无关
id有什么作用？
javascript语言：可以对HTML文档中的任何节点进行增删改操作。
获取节点时，通常通过id来获取节点
HTML文档是一棵树，树上有很多节点，每一个节点都有唯一的id（DOM树）

16、div和span

div和span有什么用？
div和span都可以称为图层。
有什么用？
图层的作用为了保证页面可以灵活的布局。
div和span是可以定位的，只要定下div的左上角的x轴和y轴坐标即可。
div和span的区别？
di独占一行
span不会独占一行

在线咨询

上一篇：让Chrome“滚”得更流畅：微软推荐Edge HTML风格滚动特性
下一篇：CSS代码实现用户跟踪及反跟踪方法

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML与CSS入门经典 笔记

、系统结构：

2、 HTML概述

3、 第一个HTML

4、基本标签

5、实体符号：为了避免和标签冲突，所以需要使用实体符号

6、HTML表格

7、thead、tbody、tfoot标签

8、body的背景颜色和背景图片

9、img标签

10、 超链接或热链接

11、request与response的概念

12、列表

13、表单（重点）

15、HTML中的结点

16、div和span

您的项目需求

HTML与CSS入门经典笔记

3、第一个HTML

10、超链接或热链接