HTML

最新推荐文章于 2023-06-15 10:43:47 发布

Mr_Chao1791

最新推荐文章于 2023-06-15 10:43:47 发布

阅读量291

点赞数

分类专栏： notes

本文链接：https://blog.csdn.net/Andrexc/article/details/89928247

版权

notes 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

二：web基础知识

HTML 泛指前端网页技术

2014年9月，html4.0升级html5简称h5

html5 大前端技术

1.web与internet

internet:全球性计算机互联网

俗称：互联网，因特网，交换网，交际网

www服务：world wide web 万维网，访问网站的服务

web就是运行在internet上的一种应用程序

internet上的服务

Ftp:上传下载文件

Email:电子邮件

Telnet：远程登录

BBS：电子公告板，简称论坛

2.Internet上的应用程序结构分类

1.C/S client：客户端 Server：服务器端王者荣耀、QQ .exe

2.B/S Browser：浏览器 Server：服务器端所有的网站、网页版微信

区别： 1.cs需要升级 2.bs不需要升级

3.web运行原理

web：运行在Internet上的b/s结构的应用程序，俗称网站

Internet：为web运行提供网络环境

web运行的原理：基于浏览器和服务器以及通信协议来实现数据的传输和展示

通信协议：规范了数据是如何打包和传递

网页的通信协议：http:// https://

服务器：

1.功能

存储数据、

接收用户请求并给出响应

提供了程序的运行环境

具备一定的安全功能

2.服务器产品

Apache---PHP、Tomcat---java、IIS---.net

3.服务器端技术

nodejs、Java、PHP、python、.net\ C#

浏览器

1.功能

代表用户发送请求

作为html、css、js的解释器，以图形化的界面展示给用户看

2.浏览器的产品

safari 、chrome、IE、Firefox

3.浏览器端技术

html5、css3、js

三：HTML快速入门

1.什么是html

Hyper Text Markup Langeuage 超文本标记语言

标记：超文本组成形式，<关键字> ,具有独特的功能

2.HTML的特点

1.以.html或者.htm 为后缀

2.由浏览器解释执行

3.用<>来定义标记

4.可以嵌套js脚本语言

3.html语法

1.标记

标记、元素、标签、节点

关键字

标签具备一些功能

学习html的第一步：背关键字，熟悉对应的功能

标记分类

1.双标记(封闭类型标记)

<关键字></关键字>

双标记成对出现，又开有关 <a></a>

2.单标记（非封闭类型）空标签（没有内容区域）

<关键字> 或者 <关键字/>

2.标签的嵌套

在一对标签内部，出现另外一对或另外一个标签，组合形成功能的叠加

学习的第二步 背嵌套顺序

<标签1>

<标签2>

<标签3> </标签3>

</标签2>

</标签1>

3.属性和值

通过属性和值，对标签进行修饰

< 标签属性1="值1" 属性2="值2" ....>

1.标准属性，通用属性。所有标签都有的属性

id ：定义元素在页面中唯一的标识

title ：鼠标悬停在元素上所提示的文本

style ：css中，定义内联样式

class ：css中，引用类选择器

2.专有属性只针对一个标签起作用的属性

学习html第三步，背专有属性及效果

4.注释

不会被解释执行的部分

快捷方式：ctrl+/ 不能嵌套注释，不能写在标签内部

学习HTML三部曲

1.背关键字，熟悉对应的功能

2.背嵌套顺序

3.背专有属性及效果

四：HTML的文档结构

1.html文档的构成

（1）文档类型的声明

告诉浏览器，解析运行本篇代码，使用h5的规则解析

（2）网页结构 <html></html>

表示网页的开始和结束，一个html文件中只能有一对html标签

<!doctype html>

<head></head>网页头部，定义网页信息

<body></body>网页主体，展示内容

</html>

（3）head标签定义网页的信息

<title></title> 网页标题

（4）body 元素

<body></body> 指定网页的主体

属性：

bgclor ：body的背景颜色，取值颜色的合法值

text ： body 文本的颜色，取值颜色的合法值

五：文本标记

1.标题元素

特点：1.字体大小有变化，h1最大，h6最小

2.字体加粗

3.单独成行，上下有垂直间距

属性：align 设置标记内容水平对其方式取值：center,left,right

2.段落标记

<p></p> 以突出的形式表示一段文字

特点：1.单独成行

2.上下有垂直间距

属性：aling:center/left/right

3换行标记

空格折叠现象：在html中，文本中不管有多少个空格和回车，都会被浏览器解析称一个空格显示

4.特殊字符（实体）

空格	&nbsp
<	<
>	>
©	© 版权
®	® 商标注册
×	× ×号
人民币	¥

5.水平分割线

属性： size="5px" 取值px为单位的数字,水平线的粗细

width="50%" 取值px或者百分比

align="left" 分割线水平对齐，left/right/center

color="red" 分割线颜色,合法的颜色值

6.预格式化

<pre></pre> 保留html代码中的回车和空格效果

7.文本样式标签

<em></em> <i></i>	斜体
<strong></strong> <b></b>	加粗
<del></del> <s></s>	删除线
<u></u>	下划线
<sup></sup>	上标
<sub></sub>	下标

8.分区元素 ----不写样式的分区元素，是看不见的

1.块分区 <div></div>

用于页面布局

2.行分区 <span></span>

为文本添加样式的时候用

9.元素的显示方式

1.块级元素

元素独立成行，都是块级元素 h1~h6、p、div、pre

2.行内元素

多个行内元素在一行显示，从左往右排列 span、i、em、strong、b、u、sup、sub、del、s

3.行内块 input

表现方式是行内元素（多个行内元素公用一行），但是具有块级元素的其它特征（宽高，边距）

4.表格

六：图形和链接

1.图形图像

属性：src 引用图片资源 url src=" url"

*.html和图片是兄弟关系，直接在src中写图片名称

2.URL

使用网网络资源图片

优点：节省服务器本地存储空间

缺点：资源不稳定

1.URL是什么
Uniform Resource Locator 统一资源定位符，俗称路径

2.绝对路径 ————使用网络资源

完整的路径 ——> 协议+主机名称+文件目录结构+文件具体的名称

使用场景：使用网络资源的时候，使用绝对路径
优点：节省服务器本地存储空间

缺点：资源不稳定

ps：本地服务器资源，在项目中，不能用绝对路径

3.相对路径 ————使用本地服务器资源

1.同级目录资源：直接使用资源名称 src=" xx.png "

2.兄弟文件夹的子元素：

直接使用兄弟文件夹的名称，在用/调用资源名称 src="xx /xx.png"

3.父级目录中的资源返回上一级： ../

先返回上一级，再引入资源 src="../xx.png"

3.属性

img的属性值：<img src="" alt"" title="" width="" height="">

src	source源，资源路径
alt	图片加载错误时，显示的文字
title	鼠标悬停时，显示的文字
width	设置图片的宽度
height	设置图片的高度

如果设置的宽高比不符合图片的原始宽高比，图片会产生失真效果

解决图片失真效果：一般情况下，width和height只设置一个，另外一个自适应

4.链接

1.语法

属性： href：链接路径、

target：指定打开链接的方式

取值 _self 默认值，在当前也main打开新网页

_blank 在新页面打开网页

2. a标签的其它表现形式

1.新建邮件，配合windows的邮件软件使用

2.执行js

<a href="javacsript:show()">执行ja语句</a>
3.下载

4.返回页面顶部

<a href="#">返回页面顶部</a>

3.锚点：

1.什么是是锚点

锚点，就是页面中的一个记号，可以通过超链接的方式，链接到锚点，让页面跳转到锚点位置显示

2.使用锚点

1.定义锚点

方式一：任何标签的id中写锚点名称 <Any id="md1" > </Any>

方式二：a标签的name属性中写锚点名称 <a name="锚点名称"></a>

2.链接到锚点

3.链接到其它页面的锚点

七：表格

1.语法

早期table用户布局，由于效率低下，后来被淘汰，使用div+css的布局

表格现在就一个显示数据的作用

<table> 表格

<tr> 行

<td></td> 列

</tr>

</table

table的属性

width="300px"	表格的宽度
height="300px"	表格的高度
border="1px"	表格的边框
align="center/left/right"	表格的水平对齐方式
bordercolor="red"	边框颜色
bgcolor="pink"	背景颜色
cellpadding="10px"	表格内边距，边框到内容的距离（以左和上为准）
cellspaceing="10px"	表格的外边距，边框到边框的距离

tr的属性

bgcolor="yellow"	背景颜色
align="left/center/right"	表格一行的内容水平对齐方式
valign="top/middle/bottom"	表格一行的内容垂直对齐方式

td的属性

width="70px"	当前单元格宽度
height="70px"	当前单元格高度
align="left/center/right"	当前单元格水平对齐方式
valign="top/middle/bottom"	当前单元格垂直对齐方式
bgcolor="blue"	当前单元格
colspan="2"	跨列,合并列
rowspan="3"	跨行,合并行

2.不规则的表格

1.跨列: colspan

从指定单元格位置处开始,横向向右合并n个单元格(n包括自己),被合并的单元格删除

2.跨行: rowspan

从指定单元格的位置处,纵向向下合并n个单元格(n包括自己),把被合并的单元格删除

3.可选标记

1.表格的标题 <caption></caption>

如果要设置标题,caption必须紧跟<table>标签后面

2.行/列的标题

<th></th>,td的属性,th都可以用

替换的特点:文字加粗,水平居中

4.表格的复杂应用

我们制作的表格,浏览器会自动的添加上<tbody></tbody>标签

1.行分组:可以将连续的几行,划分到同一个组中,进行统一的管理

1.表头 <thead></thead>

2.表主体 <tbody></tbody>

3.表角 <tfooter></tfooter>

<thead>

</thead>

<tbody>

</tbody>

<tfoot>

</tfoot>

2.表格的嵌套

表格当中所有的嵌套都只能放在td中完成

八:列表（重点*******）

1.列表的作用

按照从上到下或者从左到有右来显示所有数据并且可以在数据前增加标识

2.列表的组成

列表都是由列类型和列表项来组成

1.列表类型

有序列表 <ol></ol> order list

无序列表 <ul></ul> unorder list

2.列表项

<li></li> list item

3.有序列表

<ol>

</ol>

属性: type 指定标识项的类型

取值 1 默认值,数字

a/A 字母

i/I 罗马数字

start 指定起使;列表编号取值无单位数字

4.无序列表

多个li样式大体一致的时候,使用ul>li 布局

经常用于页面布局

<ul>

</ul>

属性:　type　设置列表标识类型

取值　　disc 默认值实心圆

circle 空心圆

square 实心方块

none 不显示

5.列表的嵌套

1.列表中嵌套其它元素

2.列表中嵌套列表

原则，嵌套只能写在li中，不管是ol还是ul，直接元素只能是li

6.定义列表

H5新出的一个名词，以及对这个名词的解释和定义

<dl> 定义列表

<dt></dt> 要解释说明的名词

<dd></dd> 对名词解释的内容

</dl>

九：结构标签

H5新出的标签，专门用于网页布局

为了让代码由可读性，h5退出一堆与div功能一摸一样的标签，专门用于网页布局

<header></header>	定义网页的头部或者某个区域的顶部
<footer></footer>	定义网页的脚步或者某个区域的底部
<nav></nav>	定义网页导航
<section></section>	定义网页的主体内容
<aside></aside>	定义网页的侧边栏
<article></article>	定义与文章相关的内容（论坛、回帖、用户评论等）

十：表单（重点***）

1.作用

提供可视化的输入控件

收集用户输入的信息并提交请求给服务器

总结：form自带提交请求的功能

ajax提交不需要form的支持

在同一个功能中，两者只能使用其中一个

2.form的组成

前端部分：提供表单控件，与用户交互的可视化控件

后端部分：后台的接口对提交的数据进行处理 nodejs+mysql

3.form 表单详解

属性:

action=“* *” 定义表单提交时，发送请求的动作（url）
如果action不写值，默认提交给本页

method="**" 定义表单的提交方法 get(默认)/post

enctype="**"    指定表单数据的编码方式，
                                     设置允许将什么类型的数据传递给服务器
         取值 application/x-www-form-urlencoded 默认值，允许将任意的字符提交给服务器（不能提交文件）

text/plain 允许提交普通字符给服务器

multipart/form-data 允许提交文件给服务器

method	特点	使用场景
get	明文提交（参数在地址栏中显示），不安全提交的数据有大小限制，最大值为2kb	向服务器要数据的时候使用get
post	隐式提交，参数不再地址栏显示，提交数据没有大小限制	要传递数据给服务器的时候使用post
其它提交方法：put、delete、option、........需要相应的权限

完整的form表单写法

收集的数据，发送给url这个接口，使用get/post方法提交，要求提交的数据是任意的字符，不是文件

4.表单控件

在form标签中，能够与用户交互的可视化控件

1.表单控件的分类

input元素 9种

textarea 多行文本域

select+option 下拉选择器

其它元素：

h5 新出的input元素 10种

2.input元素

在页面中，input提供了各式各样的输入控件文本框、密码框、单选框、多选等....

共同的属性

type="" 指定input元素的类型

name="" 为控件定义名称，此名称是给服务器用的，如果想往服务器传递参数，

此名称必须写，前后台name的值必须一致

value="" 是控件的值，真正传给服务器的值

例外：在按钮控件中，value是设置按钮上显示的文字

disabled="" 禁用，不能修改，也不能提交

取值 disabled="disabled"

disabled="true"

disabled 这种属性称之为无值属性

3.input 详解 9种

1.文本框和密码框

文本框 type="text" 默认值

密码框 type="password"

属性：

maxlength=""	设置输入的最大值
readonly	不能修改，允许提交无值属性
placeholder=""	占位提示符

2.按钮

提交按钮 type="submit" 将表格中的数据收集整理，发送给服务器

普通按钮 type="button" 没有功能，配合事件，调用js代码

重置按钮 type="reset" 将当前表单内容恢复到初始化状态

按钮中的value，设置按钮上的文本，此value不提交

h5推出新的按钮标签 <button></button> 自带submit提交功能

3.单选和复选按钮

单选按钮 type="radio"

多选按钮 type="checkbox"

属性 name，除了定义控件名称之外，还起到了分组作用，分了组才会有单选效果

必须有value属性，不然传递的参数永远是on

checked 无值属性，设置默认被选中的项

4.隐藏域 type="hidden" 想把数据提交给服务器，但是又不想给用户看到，这种数据

放到隐藏域中，用户看不见，但是可以提交

5.文件选择框，上传文件

type="file" 前提：提交方法，使用post；enctype="multipart/form-data"

属性：multiple 可以选择多个文件上传无值属性

6.textarea多行文本域

<textarea></textarea> 允许录入多行

cols 设置输入的列数 rows 设置输入的行数计算机硬件不同，不准确

7.下拉选

</select>

属性 name、 value、 selected 默认选中

size 默认值1 值为1的时候，为下拉选择框，

值>1的时候，为滚动选择框

multiple 多选无值属性

注意：

1.如果option没有value，select的value是option的内容

2.如果option有value，那么select的value是选中option的value值

8.其它元素

1.label 关联文本与表单控件

<label for=""></label> 属性 for 绑定要关联的表单控件的ID

9.分组控件

<fieldset> 分组

form表单控件......

</fieldset>

十一：浮动框架

语法：<iframe></iframe>

属性 src 引用的资源路径

frameborder="0" 清除边框

scrolling="no" 清除滚动条

width/heigth

十二：H5新表单元素

1.邮箱：提交的时候，验证@以及前后至少有一个字符

2.搜索类型自带快速清空

3.url类型，提交时验证以http://开头

4.电话号码，移动端使用时，会弹出虚拟键盘

5.数字类型，

         max：能接收的最大值
         min：能接收的最小值
         step：步长，按一次按钮，变化及格数字

6.范围类型

         max：能接收的最大值
         min：能接收的最小值
         step：步长，按一次按钮，变化几个数字

7.颜色类型

8.日期类型，提供了日期的选择控件

9.月份类型

10.周类型

11.<button></button> 替代<input type="submit" > 增加可读性

Mr_Chao1791

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML

二：web基础知识HTML 泛指前端网页技术 2014年9月，html4.0升级html5简称h5 html5 大前端技术1.web与internet internet:全球性计算机互联网俗称：互联网，因特网，交换网，交际网 www服务：world wide web 万维网，访问网站的服务 web就是运行在in...
复制链接

扫一扫