day01
1.万维网(www)和w3c组织
WWW是环球信息网的缩写,英文全称为World Wide Web，
中文名字为"万维网",常简称为Web。
万维网联盟创建于1994年，是Web技术领域最具权威
和影响力的国际中立性技术标准机构,又称W3C理事会
(就是我们常说的w3c组织).
W3C组织是对网络标准制定的一个非赢利组织，
像HTML、XHTML、CSS、XML的标准就是由W3C来定制。
w3c的官网: http://www.w3school.com.cn/
网站中有w3c组织推出的各种的技术的标准的使用及其开
发教程.
2.什么是网页
HTML 文档 = 网页
HTML 文档描述网页
HTML 文档包含 HTML 标签和纯文本
通常我们看到的网页,都是以 htm 或 html 后缀结尾的文件,俗称 HTML 文件。
不同的后缀,分别代表不同类型的网页文件,
例如以 ASP 、 PHP 、 JSP 等等。
不同后缀名的网页中都是由 HTML的标签语言+其他语言或
标签 组成的
例如:
.jsp结尾的网页文件内容中一般是由 html标签+java代码
组成
.php结尾的网页文件内容中一般是由 html标签+php代码
组成
3.什么是html?
html是超文本 标记 语言的缩写
超文本：
超越普通文本，可以在文档中添加普通文本不能添加的元素
比如：图片、超链接、音频、视频等
标记语言：
本身没有逻辑能力和执行能力,只能被读取
脚本语言：
本身具有逻辑能力和执行能力,需要被浏览器解析执行
编译语言：
本身具有逻辑能力和行为能力,需要编译运行
4.html的特点
默认采用宽松约束
标签名称不区分大小写
不会报错
从上到下依次解析执行
5.创建html文档
创建以.html或者.htm为文件名后缀的文档
6.html结构
!DOCTYPE
用来声明当前文档类型
html:
是最大的父级元素，所有元素都包含在html元素中
head：
不会展示在浏览器中
meta：用来声明当前文档的字符编码
title：声明当前页面在浏览器中的标签页名称
body：
展示在浏览器中的内容
7.html元素
标签： <标签名称></标签名称> <标签名称/>
开始标签 元素内容 结束标签、
<p> hello </p>
8.html中需要熟知的概念
8.1:元素:
1,块级元素:独占一行空间
eg:<div> <p>
2,行内元素:可以和其他元素共享一行空间，不能够直接设置宽高属性和上下内外边距
eg:<img> <button></button> <a></a>
img 特殊 可以设置宽高
3,空元素:没有文本域的标签
<img> <br> <input>
<img/>
注意:<script/> <iframe/> 错误
补充:
1.块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。
2.行内元素与块级元素属性的不同，主要是盒模型属性上
行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效
3.行内元素转换为块级元素
display:block (字面意思表现形式设为块级)
8.2:属性:
a,语法:
1,写在开始标签内部,使用空格和标签名称分开
2,属性名和属性值之间使用等号链接
3,多对属性之间使用空格隔开
4,属性值使用属双引号/单引号/不加引号 包裹
b,全部标签都有的属性
1,id:元素的唯一标识
2,class:标识一类元素--> class="a"
3,title：标识提示信息:鼠标移动上去 有提示信息
4,style：设置当前元素样式（按照css语法设定）
c,布尔属性:属性值为 true/false
设置布尔属性为true方式：
key : <input type='text' disabled >
key="key" : <input type='text' disabled='disabled' >
key="" : <input type='text' disabled='' >
key="true" : <input type='text' disabled='true' >
注:不能再html中直接设置false (无效)
9.html中的语法
1,空白
在html中，所有的空格和换行都将解析为一个空格
2,字符实体
以&符号开头，以分号结尾
<---> <
>---> >
"--> "
--> 一个空格
©-->版权声明 ©
3,注释
<!--注释内容-->
注释不能够嵌套使用
使代码更具有可读性，方便查看、管理和维护
10.常见的标签
标题标签
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
属性值：
align="left"
align="center"
align="right"
align="justify"
<hr/> 水平线
单标签
水平分割线
width:宽度
size:高度
color:颜色
<br>: 单标签,换行
<p></p>：
段落标签
默认上下有16px的外边距
<pre></pre>：
段落标签
保留用户的输入格式
<em> / <i>
强调标签 斜体效果
<strong> / <b>
强调标签 加粗效果
<img>
图片标签
src：引入图片路径 images/a.png
alt：当图片无法加载时的替代文字
width：设置图片宽度 单位px
height：设置图片高度 单位px
注:img标签是特殊的行内元素，可以设置宽高属性
<a href="">：超链接 :进行跳转操作
href属性:位置
属性值：
1。URL路径
http://www.baidu.com 直接百度
www.baidu.com 当前文件夹下的www.baidu.com 资源
2.锚点值
<a href="#id值"></a>
<a href="#name值"></a>
3.邮箱地址
mailto:邮箱地址
<a href="mailto:xiongzg@briup.com"></a>
target属性：
设置页面的打开方式
_blank:新建标签页打开
_self:在当前页面打开（默认）
_parent:在父级框架中打开
_top:在顶级框架中打开
11.列表：
1.有序列表
<ol>
<li></li>
<li></li>
<li></li>
</ol>
ol 属性：
start：设置列表编号的起始值
reversed：反转 布尔属性
2.无序列表
<!--type="circle" type="disc" type="square"-->
<ul >
<li>Coffee</li>
<li>Milk</li>
</ul>
3.标题列表
<dl>
<dt></dt>
<dd></dd>
</dl>
12.表格
table
tr : 行
td : 列
th：定义表格内的表头单元格。此 th 元素内部的文本通常会呈现为粗体且居中。
thead：表格头部
tbody：表格体部
tfoot：表格脚部
caption：表格的标题，默认居中显示
colgroup:标签用于对表格中的列进行组合，以便对其进行格式化。
col:标识一列元素
span属性:作用几列(合并几列)
table属性
width：设置表格的宽度，单位px
height：设置表格的高度。单位px
align：设置表格在浏览器中的位置
left center right、
cellspacing:设置单元格之间的距离
cellpadding：设置单元格与内容之间的距离
bgcolor：设置表格的背景颜色
border：设置表格边框 单位px
sub：下标
sup：上标
del: 删除线
ins: 下划线
day2----------------------------------------
13.form表单
1.什么是form表单
是浏览器把数据发送给服务器
2.form标签属性
action：设置表单提交的位置
method：设置表单提交方式
get：get方式提交，数据拼接在浏览器地址栏上，不安全，只能提交少量数据
post：数据封装在请求体内，相对较安全，提交重量级数据
target：服务器响应的页面的打开方式
属性值:_black , _self
name：设置表单名称
3.表单控件
1,input
type属性：用来设置当前控件类型
text：单行文本输入框
password：单行文本输入框(加密处理)
radio：单选框
checkbox：多选框 :如果默认选择 添加 checked
hidden：隐藏域
submit：提交按钮
reset：重置按钮
image：图片按钮:可以提交表单
src属性引入图片路径 width/height设置图片按钮大小
button：普通按钮，没有提交功能
name: 向后台传递数据的key
value:设置默认值 向后台传递数据的value
size：设置给文本输入框，设置输入框长度，默认为20px
maxlength：设置用户所输入的字符个数
checked：设置给单选/多选
默认选中
disabled：禁用控件 布尔属性
readonly：只读属性 布尔属性
placeholder="背景提示信息"
required : 布尔属性 验证用户是否输入
用户没哟输入数据-->提示用户输入
oninvalid="setCustomValidity('请输入您的姓名')
eg:改变背景提示信息
required ;"
eg:
<input placeholder="背景提示信息" required oninvalid="setCustomValidity('请输入您的姓名');">
2,label : 将普通文本和空间绑定
1,将单选/多选中的文字和控件关联起来，提升用户体验
性别：
<label>
男： <input type="checkbox">
</label>
点击男的时候 也会 勾选
2,for属性=“id值”
<label for="wo">
女:
</label>
<input type="checkbox" id="wo">
点击女的时候 也会 勾选
3,select:下拉列表
select子标签
option：下拉列表项
option属性：
disabled 不可用
value：设置默认值，当不写value属性时，默认提交option标签中的文本内容
optgroup：给下拉列表分类
label属性：当前类标题
select属性：
name : key
disabled：禁用属性
multiple：是否可以多选，布尔属性，按住Ctrl键进行多选
size：每次显示几个列表项
<select>
<optgroup label="上海">
<option>上海1</option>
<option>上海1</option>
<option>上海1</option>
</optgroup>
<optgroup label="昆山">
<option>昆山1</option>
<option>昆山1</option>
<option>昆山1</option>
</optgroup>
</select>
4,textarea
多行文本输入框
属性
cols：列数
rows：行数
wrap：是否换行
off： 不允许换行
hard: 硬换行，提交表单时不提交换行元素
soft：软换行，提交换行元素
readonly 只读, 布尔属性
disabled 禁用
5,button
按钮标签
type属性
submit：提交表单
reset：重置
button：普通按钮
当button标签写在form内部时，默认type="submit"
当button标签写在form外部时，默认type="button"
16,跑马灯 marquee
属性:
behavior 行为 : scroll|alternate|slide
direction (方向) : left|right|up|down
1.万维网(www)和w3c组织
WWW是环球信息网的缩写,英文全称为World Wide Web，
中文名字为"万维网",常简称为Web。
万维网联盟创建于1994年，是Web技术领域最具权威
和影响力的国际中立性技术标准机构,又称W3C理事会
(就是我们常说的w3c组织).
W3C组织是对网络标准制定的一个非赢利组织，
像HTML、XHTML、CSS、XML的标准就是由W3C来定制。
w3c的官网: http://www.w3school.com.cn/
网站中有w3c组织推出的各种的技术的标准的使用及其开
发教程.
2.什么是网页
HTML 文档 = 网页
HTML 文档描述网页
HTML 文档包含 HTML 标签和纯文本
通常我们看到的网页,都是以 htm 或 html 后缀结尾的文件,俗称 HTML 文件。
不同的后缀,分别代表不同类型的网页文件,
例如以 ASP 、 PHP 、 JSP 等等。
不同后缀名的网页中都是由 HTML的标签语言+其他语言或
标签 组成的
例如:
.jsp结尾的网页文件内容中一般是由 html标签+java代码
组成
.php结尾的网页文件内容中一般是由 html标签+php代码
组成
3.什么是html?
html是超文本 标记 语言的缩写
超文本：
超越普通文本，可以在文档中添加普通文本不能添加的元素
比如：图片、超链接、音频、视频等
标记语言：
本身没有逻辑能力和执行能力,只能被读取
脚本语言：
本身具有逻辑能力和执行能力,需要被浏览器解析执行
编译语言：
本身具有逻辑能力和行为能力,需要编译运行
4.html的特点
默认采用宽松约束
标签名称不区分大小写
不会报错
从上到下依次解析执行
5.创建html文档
创建以.html或者.htm为文件名后缀的文档
6.html结构
!DOCTYPE
用来声明当前文档类型
html:
是最大的父级元素，所有元素都包含在html元素中
head：
不会展示在浏览器中
meta：用来声明当前文档的字符编码
title：声明当前页面在浏览器中的标签页名称
body：
展示在浏览器中的内容
7.html元素
标签： <标签名称></标签名称> <标签名称/>
开始标签 元素内容 结束标签、
<p> hello </p>
8.html中需要熟知的概念
8.1:元素:
1,块级元素:独占一行空间
eg:<div> <p>
2,行内元素:可以和其他元素共享一行空间，不能够直接设置宽高属性和上下内外边距
eg:<img> <button></button> <a></a>
img 特殊 可以设置宽高
3,空元素:没有文本域的标签
<img> <br> <input>
<img/>
注意:<script/> <iframe/> 错误
补充:
1.块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。
2.行内元素与块级元素属性的不同，主要是盒模型属性上
行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效
3.行内元素转换为块级元素
display:block (字面意思表现形式设为块级)
8.2:属性:
a,语法:
1,写在开始标签内部,使用空格和标签名称分开
2,属性名和属性值之间使用等号链接
3,多对属性之间使用空格隔开
4,属性值使用属双引号/单引号/不加引号 包裹
b,全部标签都有的属性
1,id:元素的唯一标识
2,class:标识一类元素--> class="a"
3,title：标识提示信息:鼠标移动上去 有提示信息
4,style：设置当前元素样式（按照css语法设定）
c,布尔属性:属性值为 true/false
设置布尔属性为true方式：
key : <input type='text' disabled >
key="key" : <input type='text' disabled='disabled' >
key="" : <input type='text' disabled='' >
key="true" : <input type='text' disabled='true' >
注:不能再html中直接设置false (无效)
9.html中的语法
1,空白
在html中，所有的空格和换行都将解析为一个空格
2,字符实体
以&符号开头，以分号结尾
<---> <
>---> >
"--> "
--> 一个空格
©-->版权声明 ©
3,注释
<!--注释内容-->
注释不能够嵌套使用
使代码更具有可读性，方便查看、管理和维护
10.常见的标签
标题标签
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
属性值：
align="left"
align="center"
align="right"
align="justify"
<hr/> 水平线
单标签
水平分割线
width:宽度
size:高度
color:颜色
<br>: 单标签,换行
<p></p>：
段落标签
默认上下有16px的外边距
<pre></pre>：
段落标签
保留用户的输入格式
<em> / <i>
强调标签 斜体效果
<strong> / <b>
强调标签 加粗效果
<img>
图片标签
src：引入图片路径 images/a.png
alt：当图片无法加载时的替代文字
width：设置图片宽度 单位px
height：设置图片高度 单位px
注:img标签是特殊的行内元素，可以设置宽高属性
<a href="">：超链接 :进行跳转操作
href属性:位置
属性值：
1。URL路径
http://www.baidu.com 直接百度
www.baidu.com 当前文件夹下的www.baidu.com 资源
2.锚点值
<a href="#id值"></a>
<a href="#name值"></a>
3.邮箱地址
mailto:邮箱地址
<a href="mailto:xiongzg@briup.com"></a>
target属性：
设置页面的打开方式
_blank:新建标签页打开
_self:在当前页面打开（默认）
_parent:在父级框架中打开
_top:在顶级框架中打开
11.列表：
1.有序列表
<ol>
<li></li>
<li></li>
<li></li>
</ol>
ol 属性：
start：设置列表编号的起始值
reversed：反转 布尔属性
2.无序列表
<!--type="circle" type="disc" type="square"-->
<ul >
<li>Coffee</li>
<li>Milk</li>
</ul>
3.标题列表
<dl>
<dt></dt>
<dd></dd>
</dl>
12.表格
table
tr : 行
td : 列
th：定义表格内的表头单元格。此 th 元素内部的文本通常会呈现为粗体且居中。
thead：表格头部
tbody：表格体部
tfoot：表格脚部
caption：表格的标题，默认居中显示
colgroup:标签用于对表格中的列进行组合，以便对其进行格式化。
col:标识一列元素
span属性:作用几列(合并几列)
table属性
width：设置表格的宽度，单位px
height：设置表格的高度。单位px
align：设置表格在浏览器中的位置
left center right、
cellspacing:设置单元格之间的距离
cellpadding：设置单元格与内容之间的距离
bgcolor：设置表格的背景颜色
border：设置表格边框 单位px
sub：下标
sup：上标
del: 删除线
ins: 下划线
day2----------------------------------------
13.form表单
1.什么是form表单
是浏览器把数据发送给服务器
2.form标签属性
action：设置表单提交的位置
method：设置表单提交方式
get：get方式提交，数据拼接在浏览器地址栏上，不安全，只能提交少量数据
post：数据封装在请求体内，相对较安全，提交重量级数据
target：服务器响应的页面的打开方式
属性值:_black , _self
name：设置表单名称
3.表单控件
1,input
type属性：用来设置当前控件类型
text：单行文本输入框
password：单行文本输入框(加密处理)
radio：单选框
checkbox：多选框 :如果默认选择 添加 checked
hidden：隐藏域
submit：提交按钮
reset：重置按钮
image：图片按钮:可以提交表单
src属性引入图片路径 width/height设置图片按钮大小
button：普通按钮，没有提交功能
name: 向后台传递数据的key
value:设置默认值 向后台传递数据的value
size：设置给文本输入框，设置输入框长度，默认为20px
maxlength：设置用户所输入的字符个数
checked：设置给单选/多选
默认选中
disabled：禁用控件 布尔属性
readonly：只读属性 布尔属性
placeholder="背景提示信息"
required : 布尔属性 验证用户是否输入
用户没哟输入数据-->提示用户输入
oninvalid="setCustomValidity('请输入您的姓名')
eg:改变背景提示信息
required ;"
eg:
<input placeholder="背景提示信息" required oninvalid="setCustomValidity('请输入您的姓名');">
2,label : 将普通文本和空间绑定
1,将单选/多选中的文字和控件关联起来，提升用户体验
性别：
<label>
男： <input type="checkbox">
</label>
点击男的时候 也会 勾选
2,for属性=“id值”
<label for="wo">
女:
</label>
<input type="checkbox" id="wo">
点击女的时候 也会 勾选
3,select:下拉列表
select子标签
option：下拉列表项
option属性：
disabled 不可用
value：设置默认值，当不写value属性时，默认提交option标签中的文本内容
optgroup：给下拉列表分类
label属性：当前类标题
select属性：
name : key
disabled：禁用属性
multiple：是否可以多选，布尔属性，按住Ctrl键进行多选
size：每次显示几个列表项
<select>
<optgroup label="上海">
<option>上海1</option>
<option>上海1</option>
<option>上海1</option>
</optgroup>
<optgroup label="昆山">
<option>昆山1</option>
<option>昆山1</option>
<option>昆山1</option>
</optgroup>
</select>
4,textarea
多行文本输入框
属性
cols：列数
rows：行数
wrap：是否换行
off： 不允许换行
hard: 硬换行，提交表单时不提交换行元素
soft：软换行，提交换行元素
readonly 只读, 布尔属性
disabled 禁用
5,button
按钮标签
type属性
submit：提交表单
reset：重置
button：普通按钮
当button标签写在form内部时，默认type="submit"
当button标签写在form外部时，默认type="button"
16,跑马灯 marquee
属性:
behavior 行为 : scroll|alternate|slide
direction (方向) : left|right|up|down
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
