博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
HTML笔记
阅读量:5064 次
发布时间:2019-06-12

本文共 5923 字,大约阅读时间需要 19 分钟。

web前端

Internet:是一个全球性的计算机互联网络,中文名称“因特网”、“国际互联网”、“网际网”等等;

Internet提供的服务:http、ftp、Telnet、email、www、bbs等等;

基本实现技术:分组交换原理--信息在Internet上被分成许多的小数据包(分组)进行传输,到达目的地后将数据包组装成信息;

TCP/IP协议簇

Web和Internet的关系:web是运行在Internet上最流行的应用之一,Internet为web提供了网络环境;

因为web的出现,从而极大地推动了Internet的普及与推广;

web的优势:传输快、成本低、用户多、方便易用、形式多样、便于反馈......

web的劣势:虚假信息、病毒、网瘾、数据丢失......

web:称为万维网或环球网,www(world wide web),上世纪90年代由欧洲核子研究中心的Bener.Lee,1992年正式上网;

把各类信息和服务无缝连接,提供生动的图形用户界面;
信息--文字、图片、视频、音频...
服务--Telnet、email、ftp......
万维网就是无数文档的集合,驻留在因特网的某个地方

web的工作原理:

基于浏览器/服务器;由web服务器、浏览器和通信协议三部分组成;
通信协议采用的是http协议:超文本传输协议(hypertext transfer protocol)
通过浏览器发送请求到服务器,服务器响应请求将数据发送到请求的浏览器,中间的过程是通过http协议执行;

开发人员共具:

F12;右键--审查元素(检查)

在web主要以网页的形式来发布多媒体信息;

网页采用超文本标记语言HTML(hypertext markup language)编写;
编辑--记事本、word、editplus、hbuilder、dw、sublime text、webstrom......

web服务器:

存储web页面上的信息,并提供管理环境;响应浏览器的请求,执行服务器端的程序;

主要的web服务器产品:

Tomcat、Apache、IIS

web浏览器:

提交请求;解析HTML和内嵌脚本(js);用图形化的方式显示HTML文档;

主流的浏览器:

IE、firefox、chrome、opera、safari

服务器端技术:php、jsp、asp(asp.net)

前端技术(客户端技术):

HTML、CSS、JS(JavaScript);

web是一个超文本文件的集合;超文本文件即是网页/HTML文档;通常是以.html或.htm为后缀的文档

什么是HTML:

超文本标记语言,一种纯文本类型的语言;使用带“尖括号”的“标记”将网页中的内容标识出来;

标记语法:

HTML用于描述功能的符号称为“标记”;
标记在使用时必须用“尖括号”括起来;

封闭标记:

封闭标记又叫双标记,必须成对出现;<标记>内容</标记>;

非封闭标记:

又叫空标记或者单标记;<标记 /> 或者 <标记>

Xhtml于2000年1月成为W3C标准;Xhtml是更严格更纯净的HTML版本;

HTML文档结构:

1、声明--文档类型声明;声明必须写在文档的最开始部分;
2、页面/文档--<html></html>
3、页面头部--<head></head>主要装载页面的信息;
4、页面主体--<body></body>
<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>

文档标题:<title></title>给页面起一个名字;

每一个标签都有属性,属性可以是一个或者多个,多个属性之间用空格隔开;

属性的组成:属性名=“属性值”;
属性必须写在开始标记内部;

HTML注释:只有程序员自己看得见,而不会再网页中显示的内容;

<!--注释内容-->
注释内容中一定不要存在--
<!--fjlwaijf--waefwefa-->

再HTML页面中无论敲多少空格,都只会显示一个空格;

要想有多个空格,必须使用转义字符;
转义字符:
空格--&nbsp;
左尖括号<--&lt;
右尖括号>--&gt;
版权©--&copy;
注册商标--&reg;

换行标记:<br />

强制不换行标记:<nobr>不换行内容</nobr>

标题标记:<hn></hn> n=1,2,3,4,5,6

段落标记:<p></p>

文本样式标签:

<b></b>文本加粗;
<i></i>文本倾斜;
<u></u>添加下划线;
<s></s>添加删除线;
以上标签全部不推荐使用,已经被废弃;
<strong></strong>强调文本,表现为文本加粗;
<em></em>强调文本,表现为文本倾斜;
<sup></sup>上标标记;
<sub></sub>下标标记;

标签分类:

块级标签:默认情况下,块级标签回独占一行,元素的前后内容都会自动换行;
<hn></hn>、<p></p>
行内标签:不会换行,可以和其他行内元素位于同一行;
b、i、u、s、strong、em、sup、sub

分区标签:

<div></div>
<span></span>

预格式化标签:

<pre></pre>
写在该标签内的内容会按照编写时的格式展示在网页中;

页面属性:

背景颜色--bgcolor;
页面文本颜色--text;

字体标签:

<font></font>
字体颜色--color;
字体--face;
字体大小--size;最小1,最大7;
该标签已被废弃;

目录结构:

一个项目(web站点)下的所有文件所在的位置;一个web站点包含多个目录,每个目录包含站点的不同部分;web站点的主目录称为根目录;位于根目录下的其他文件夹称为子目录;每个子目录都会包含具体功能的下一级子目录;

所有的文件命名必须是英文、数字、下划线(_)和连接线(-)组成;

URL:

uniform resource location 统一资源定位器;
用来标识网络中的任何资源
即路径,指从当前位置到目标位置所经过的路线;

URL分类:

1、绝对路径:192.168.101.111
http:// www.baidu.com /images /img01.jpg
协议名 主机名 目录路径 文件名
用于指向其他设备上的文件;
2、相对路径:
指目标文件的位置是相对于当前文件的位置;
目标文件和当前文件在同一个目录下,直接写文件名--img01.jpg
目标文件所在的文件夹和当前文件在同一个目录下--文件夹名/文件名 images/img01.jpg
目标文件和当前文件不在同一目录下,用../表示返回上一级目录,一个../表示返回一级
../images/img01.jpg
../../images/img01.jpg
3、根相对路径:
用于服务器

水平居中标签:

<center></center>
该标签已被废弃;

标签的对齐属性:

align="left"
align="right"
align="center"

水平分割线标签:<hr />

宽度--width,最好带上单位px
高度--size,不用带单位
对齐--align
颜色--color

图像标签:<img />

链接图像地址--src="路径";
宽度--width,只给宽度表示定宽,高度自动等比变化;
高度--height,只给高度表示定高,宽度自动等比变化;
title--鼠标移入后的提示文字,用于描述图片;
alt--当图片无法正常显示时所用的替代文字;

超链接标签:<a></a>

链接属性--href="路径"
空链接:1、href="#",会有返回顶部的效果;
2、href="javascript:;"
图片:href="图片路径",可以将链接指向一张图片;
压缩包:href="XXX.rar",指向一个压缩包,点击之后会下载;
发邮件:href="mailto:邮箱地址",可以给该邮箱发送邮件;
target--链接打开的目标位置;
target="_blank",在新窗口打开链接;
target="_self",在当前页面打开链接;
锚点名称--name,标记,可以将链接指向该标记,以达到跳转到页面指定位置的效果;

表格标签:<table></table>

表格--背景色:bgcolor
边框:border
宽度:width
高度:height
边框色:bordercolor
边框深色:bordercolordark(废弃)
边框浅色:bordercolorlight(废弃)
单元格间距:cellspacing,不用带单位
内边距:cellpadding,要带单位
对齐:align
单元行--高度:height,百分比
水平对齐:align;left、center、right
垂直对齐:valign;top、middle、bottom
单元格--宽度:width,百分比
水平对齐:align;left、center、right
垂直对齐:valign;top、middle、bottom
跨行:rowspan
跨列:colspan

表格分区:

<thead></thead>:划分出表格的头部
<tbody></tbody>:划分出表格的主体
<tfoot></tfoot>:划分出表格的底部

表格标题:<caption></caption>

为表格定义一个标题,默认在表格外的最上方水平居中显示;
caption必须位于table的正下方,紧挨着table;

表头:<th></th>

不能包含td,表头只能包含在tr中,默认表头内的文字居中显示并加粗;
表单:
用于显示、收集信息,并提交信息到服务器;
组成部分:
1、实现数据交互的可见的用户界面,比如:文本框、提交等;
2、提交后的表单处理;
使用<form></form>标记创建表单;在该标记中添加其他表单可以包含的控件;

<input />:用于收集用户信息;

类型--type:text文本类型;
password密码类型
radio单选类型
checkbox多选类型
submit提交按钮
reset重置按钮
button普通按钮
输入框(文本类型和密码类型)--name设置输入框提交后对应的信息的名称
value一般是用于设置提示信息,也可以用于填写的信息的收集
maxlength限制输入的最大字符长度
readonly设置为“只读”
required设置为“必填”
disabled设置为“禁用”

单选和多选--name设置选项组的名称,单选的name必须一样,多选的name可以不同(最好相同)

value确认和收集选项信息,提交到服务器
checked设置默认选择项

按钮--value设置按钮的文本

name设置按钮名称

<label></label>:将文本于控件联系在一起,点击文本就可以触发控件;

for=“控件的id”就可以和控件绑定;

选项框:<select></select>

name--设置选项框的名称
size--设置显示的选项数目,大于1则变为滚动列表
multiple--设置多选,按住Ctrl多选
选项:<option></option>
value--确认和收集选项的信息,提交到服务器
selected--设置默认选项
多行文本框:<textarea></textarea>
name--设置名称
cols--设置内容的列数,相当于设置了宽度
rows--设置内容的行数,相当于设置了高度
readonly--只读
required--必填
disabled--禁用

input其他类型:email--邮箱类型,输入错误的邮箱地址,提交时会报错,只会检测有没有“@”;

form表单属性:

enctype:指定表单的数据类型(数据进行编码的方式)
method:指定表单数据提交的方式;
get--将数据附加在地址中提交;最大缺点是缺乏安全性、上传的信息不完全;优点是数据的传输速度快;
post--将数据打包提交到服务器;安全性非常好、数据传输完整;传输速度相对较慢;
action:定义表单提交时发生的动作,包含服务器脚本的URL(jsp、php...)

控件分组:<fieldset></fieldset>为控件分组

<legend></legend>为分组指定标题

有序列表:<ol></ol>

列表项:<li></li>
代码:<ol>
<li></li>
</ol>
属性--type:1,数字类型;
a,小写字母类型;
A,大写字母类型;
i,小写罗马数字类型;
I,大写罗马数字类型;
start:设置序列号的起始;

无序列表:<ul></ul>

列表项:<li></li>
属性--type:disc实心圆(默认);
circle空心圆(圆圈);
square实心举行;

定义列表:<dl></dl>用于给出一类实物的定义,如:名词解释、解释说明、字典等等

<dt></dt>指定一个名词或术语
<dd></dd>对dt当中的内容进行解释说明
dt下面的dd是对该dt的解释说明,一个dt下面可以有多个dd;一个dl中可以有多个dt;

结构标记

<header></header>用于定义页面头部或者某一个区域的头部
<nav></nav>用于定义页面的导航信息
<section></section>定义某一个区域的主体
<article></article>用于定义某一篇文章、博客、论坛帖子等等
<article>
<h1></h1>
<p></p>
<img />
</article>
<footer></footer>定义页面的底部或者某一个区域的底部
<aside></aside>定义页面的额外信息,比如:侧边栏、广告栏等等

摘要与细节

<details></details>用于定义细节
<summary></summary>用于定义细节的标题

度量标记:

<meter></meter>
value设置电量的值
min设置最小取值范围
max设置最大取值范围

文本高亮显示标记:

<mark></mark>

 

转载于:https://www.cnblogs.com/3542446186qq/p/10098806.html

你可能感兴趣的文章
oracle连接的三个配置文件(转)
查看>>
pytho logging
查看>>
Python内置函数(29)——help
查看>>
oracle导出/导入 expdp/impdp
查看>>
Objective - C基础: 第四天 - 10.SEL类型的基本认识
查看>>
Android TextView加上阴影效果
查看>>
《梦断代码》读书笔记(三)
查看>>
Java8 Lambda表达应用 -- 单线程游戏server+异步数据库操作
查看>>
[Unity3D]Unity3D游戏开发MatchTarget的作用攀登效果实现
查看>>
AngularJS学习篇(一)
查看>>
关于Xshell无法连接centos6.4的问题
查看>>
css3动画——基本准则
查看>>
输入月份和日期,得出是今年第几天
查看>>
pig自定义UDF
查看>>
Kubernetes 运维学习笔记
查看>>
spring security 11种过滤器介绍
查看>>
代码实现导航栏分割线
查看>>
大数据学习系列(8)-- WordCount+Block+Split+Shuffle+Map+Reduce技术详解
查看>>
【AS3代码】播放FLV视频流的三步骤!
查看>>
枚举的使用
查看>>