南通网站推广排名,兰州网站的建设,网站流量分析网站,魅族官方网站挂失手机找到怎么做Date:20231212 html标签 基础学习笔记
一、web和internet
1.1、Internet简介
Internet 是一个全球性的计算机互联网络#xff0c;中文名称有因特网、“国际互联网”、“网际网”、交互网络等Internet提供的主要服务 Telnet、Email、www、BBS、FTP等… Date:20231212 html标签 基础学习笔记
一、web和internet
1.1、Internet简介
Internet 是一个全球性的计算机互联网络中文名称有因特网、“国际互联网”、“网际网”、交互网络等Internet提供的主要服务 Telnet、Email、www、BBS、FTP等 基本实现技术 分组交换原理信息在Internet上被分成许多小数据包(分组)进行传输到达目的地后将数据包重组为信息TCP/IP协议簇 Web与Internet的关系 Web是运行在Internet之上最流行的应用之一Internet为Web提供了网络环境Web的出现极大的推动了Internet的普及与推广
1.2、Web简介
又称为万维网或环球网即 WWW (World Wide Web)把各种类型的信息和服务无缝连接提供生动的图形用户界面可以称之为文档万维网其实就是无数文档的集合这些文档驻留在因特网的某些地方
1.3、web的工作原理
Web 是基于Internet 的一个多媒体信息服务系统 基于浏览器/服务器模式由Web服务器、浏览器(Browser)和通信协议三部分组成通信协议采用的是HTTP协议超文本传输协议(Hypertext Transfer Protocol) 在Web服务器上主要以网页的形式来发布多媒体信息、 网页采用超文本标记语言HTML(Hyper Text Markup Language)编写 浏览器软件连接到Web服务器并获取网页 浏览器解释HTML网页文档并显示在用户的屏幕上
1.4、Web服务器 主要功能 存储Web上的内容信息如:Web页文件提供管理环境响应浏览器的请求执行服务端程序安全功能等 主要web服务器产品 TOMCATIISAPACHE
1.5、服务端技术
运行于服务端大多提供了数据库访问的能力 PHPJSPASPNode
1.6、客户端技术
运行于客户端由浏览器来解释运行 HTMLCSSJavaScript
二、HTML
2.1、超文本
Web是一个超文本文件的集合超文本文件时web的基本组成单元也称为网页或HTML文档web页等通常以.html或htm为后缀的文件Web页之间通过超文本中的超级链接组织在一起
2.2、什么是HTML
HTML(HyperText Markup Lanuage)超文本标记语言一种纯文本类型的语言 使用带有尖括号的标记将网页中的内容逐一标识出来 用来设计网页的标记语言用该语言编写的文件以.html或htm为后缀由浏览器解释执行HTML页面上可以嵌套用脚本语言编写的程序段如VBScript、JavaScript
2.3、标记语法
HTML 用于描述功能的符号称为标记比如p、h1等 标记在使用时必须使用尖括号括起来有封闭类型标记又有非封闭类型的标记 封闭类型标记也叫双标记必须成对出现 标记内容/标记 非封闭类型标记也叫空标记或者单标记 标记/或者标记不能包含内容
2.4、元素
元素即标记每一对尖括号包围的部分 如 body/body包围的元素就叫做body元素元素就像是小标签用于标识网页文档的不同部分
2.5、元素嵌套 元素之间可以相互嵌套形成更为复杂的语法 在嵌套元素时需要注意标记的嵌套顺序 案例 bodyp段落1/p
/body2.6、属性和值
属性用来修饰元素 属性的声明必须位于开始标记里一个元素的属性可能不止一个多个属性之间用空格隔开多个属性之间不区分先后顺序 每个属性都有值 属性和属性的值之间用等号连接属性的值包含在引号中或 单引号、不写引号都可以
p aligncenter段落一/p标准属性 每个元素都有自己所特有的属性有些属性是绝大多数元素都支持的属性称为标准属性(或通用属性) idtitleclassstyle
2.7、注释
为代码添加适当的注释是一种良好的编码习惯注释只在编辑文档情况下可见在浏览器展示页面时并不会显示添加注释的语法!-- 注释的文本内容 -- !--和--之间的任何内容都不会显示在浏览器中注释不可以嵌套在其他注释中注释不可以位于嵌在中
2.8、文档结构
!-- 网页的头部页面的全局信息 --
!DOCTYPE html
htmlhead!-- 页面的标题 --title/title!-- 页面的元数据(形容页面的东西) --meta charsetutf-8!-- 跟搜索排名有关 --meta name content!-- 引入js文件 --script/script!-- 元素内部样式 --style/style!-- 引入css文件 --link//head!-- 网页的主体页面展示的内容 --body/body
/html
三、元素标签 xxx
3.1、头部标签/元素 head 元素用于为页面定义全局信息 所有其他头元素的容器紧跟在起始标签html之后可包含 title、meta、script、style、link title 用于为文档定义标题 标题元素的内容出现在浏览器顶部没有属性必须出现在head元素中一个文档只能有一个标题元素 meta 用于定义网页的基本信息 元数据元素为空标题常用属性有content http-equiv
3.2、body 主体内容 body元素出现在head元素之后包含网页要显示给读者的内容称为主题内容 可以包含除了html、head外的所有元素 body的专有属性: bgcolor text 案例 !-- 背景颜色 -- !--字体颜色 --
body bgcolor#000000 textyellow我的第一个网页
/body
3.3、文本标记
文本是网页上的重要组成部分直接书写的文本会用浏览器默认的样本显示包含在标记中的文本则会被显示为标记所拥有的样式 标题元素段落元素换行元素分区元素特殊字符注释
3.3.1、标题元素 hn
标题元素让文字以醒目的方式显示,往往用于文章的标题基本语法h#../h# #1,2,3,4,5,6从h1到h6,即 标题1-标题6
3.3.2、段落元素 p
p元素提供了结构化文本的一种方式p元素的文本会用单独的段落显示 与前后的文本都换行分开添加一段额外的垂直空白距离,作为段落间距常用属性:align
3.3.3、换行元素 br
使用br元素在任何地方创建手动换行 空标记
3.3.4、分割线元素 hr hr元素用于在页面上创建一条水平线 空标记常用于将页面的不同部分隔开hr后面的文本将出现在新段落中 常用属性 sizewidthaligncolor 案例 hr colorred width50% size10px alignright/hr3.3.5、预格式化元素 pre
保留源文档中的格式,即保留原来的换行和文本中的空白把源码中的格式保留到页面当中
3.3.6、特殊字符
空格折叠 多个空格或制表符压缩成单个空格,即只显示一个空格 特殊字符(如空格),需要进行转义(使用字符实体) nbsp; 代表一个空格copy; 版权©reg; 注册商标 ®It; 小于 gt; 大于 yen; times; ×
3.3.7、文本样式标签
文本样式的作用是对文本进行修饰,如加粗,倾斜等 加粗: b../b,strong../strong倾斜: i../i,em../em下划线: u../u删除线: s../s,del../del上标: sup../sup下标: sub../sub
3.4、分区元素 和 分区元素用于为元素分组,常用于页面布局 块分区元素: div/div 行内分区元素: span/span 设置同一行文字内的不同格式 案例 span stylecolor:redhello!/spanworld3.5、行内元素与块级元素重要
块级元素 默认情况下,块级元素会独占一行,即元素前后都会自动换行如 p,div,hn 行内元素 不会换行,可以和其他行内元素位于同一行如 span,b,i,u
3.6、web目录结构
目录就是web站点中文件夹的名称 包含多个目录每个目录包含站点的不同部分 web站点的主目录,称为web站点的根目录 位于根目录下的其他文件夹,称为子目录每个子目录下都会包含具体功能的下一级子目录
3.7、URL 统一资源定位器
URL(Uniform Resource Locator): 统一资源定位器,用来标识网络中的任何资源 文本,图片,音视频文件,段落,或其他超文本 即路径,指从当前位置到目标位置所经过的路线路径在Web页面主要有三种形式 绝对路径 指的是文件从最高级目录下开始的完整的路径,无论当前路径是什么,使用绝对路径总是能找到要链接的文件即完整的URL组成 协议,主机名,目录路径,文件名 相对路径 指文件的位置是当对于当前文件的位置,它包括目录名,或指向一个可以从当前目录触发找到该文件的路径 根相对路径 srcd:/0.9.png 项目中禁止用根目录方式获取图片资源,因为d盘是服务器的d盘,浏览器访问不到d盘
3.8、img 图片标签
img或者img/专有属性 srcurl 图片资源alt 当图片加载失败时显示的文本
3.9、a 超链接标签 属性 href 没有href就是一个文本 target指定打开连接的方式 取值默认缺省_self 在本页面打开_blank 在新页面打开 作用 跳转网页或网站 a hrefhttp://www.baidu.combaidu/a 跳转锚点 锚点,就是页面上的一个记号点击a标签之后会跳转到记号的位置在某位置下记号h4方式 a name“锚点名称”/a
h5 方式 任意标签any id“锚点名称”/any跳转到本页锚点 a href#锚点名称火影忍者/a跳转到其他页面的锚点 a href**.htm#锚点名称火影忍者/a 下载 a href download01.png下载/a 返回顶部 a href”#”返回顶部/a 调用js脚本 a hrefjavascript:alert(hello world)/a
scriptfunction fn(){alert(hello world)}
/script
a hrefjavascript:fn()调用js脚本/a3.10、table表格标签
3.10.1、表格的语法
快捷键: tabletr*4td*4表格中列,如果变宽,影响的是所有行这一列的宽度;如果变高,影响的是,当前行所有列的高度
3.10.2、table的属性
width“400px” 宽度height“400px” 高度border“2px” 边框bordercolor“red” 边框颜色bgcolor“orange” 背景颜色align“center” 水平对齐方式cellpadding“50px” 单元格内边距(边框到内容之间的距离)cellspacing“50px” 单元格的外边距
3.10.3、tr属性
align“right” 这一行内容的水平对齐方式 left/center/rightvalign“middle” 这一行内容的垂直对齐方式 top/middle/bottombgcolor“yellow” 这一行的背景
3.10.4、td属性
width“200px” 宽度height“200px” 高度bgcolor“purple” 背景色align“left” 这一列内容的水平对齐方式valign“bottom” 这一列内容的垂直对齐方式colspan 跨列合并rowspan 跨行合并
3.10.5、不规则的表格 跨列 colspan 从指定的单元格位置位置处开始,横向向右合并n个单元格(n包含自己),然后把被合并的单元格删除掉. 跨行 rowspan 从指定的单元格位置处开始,纵向向下合并n个单元格(n包含自己),然后把被合并的单元格删除掉
3.10.6、可选标题 caption 表格的标题 caption我是标题/caption 必须紧紧跟着table的开始标签 案例 table width200px height200px border2px!-- 唯一的,可不写 --caption我是标题/captiontr..../tr....
/table3.10.7、表格的复杂应用 表头th../th 特点: 加粗,居中th替代td,所有的td的属性,th都可以使用 行分组 可以将连续的几行,划分到一个组上,进行统一的管理表头 thead/thead表主体 tbody/tbody表脚 tfoot/tfoot行分组不见,如果源码没有行分组,浏览器渲染时,自动添加tbody 表格的嵌套 表格中所有的嵌套,都要放在td中
3.11、ul li dl ol 列表标签 列表的作用 有条理的显示数据传统项目,无序列列表多由于布局 列表类型 有序列表 ol.../ol无序列表 ul.../ul列表项 li../li 列表的属性 有序列表的属性 start“4” 指定编号的起始位置 type“I” 指定编号的类型 默认 1 数字A/a 英文字母i/I 罗马数字无语列表的属性 type“none” 默认值 disc
circle 空心圆
square 实心方块
none 没有标识列表的嵌套 所有的嵌套都必须放在li内部语义要求。列表嵌套列表,被嵌套的列表,也必须放在li中 h5–定义列表 定义列表常用于给出一类事物或对明词的解释说明dldtJavaScript/dtdd它是一种解释性语言/dd
/dl3.12、input 表单标签
3.12.1、作用
提供可视化的输入控件用户输入的内容被表单自动收集整理并且提交给服务器
注意 :表单没有接受响应的能力,所以可以使用js的dom操作收集页面的信息,再使用ajax发送请求和接受响应,但是ajax不能自动的收集整理数据。而且使用ajax就无法使用form表单自动收集提交数据的功能。
3.12.2、表单 form/form
form/form 在页面上不可见可以自动收集整理数据提交到服务器属性 action“” 定义表单提交时发送的动作接口url method“” 定义表达提交的方式 enctype“”指定表单数据的编码方式设置允许将什么样的数据提交给服务器 取值1. application/x-www-form-urlencoded默认值,允许将任何字符提交给服务器(文件除外)2. text/plain 允许提交普通字符不包括特殊字符3. mulitipart/form-data传递文件在form标签中能够与用户进行交互的可视化元素input type 所有input元素都是行内块在页面中提供各种各样的输入控件input分类 input元素 基础9种h5新出的10种textarea 多行文本域selectoption下拉选择框其他相关元素 input公用属性 type 指定input元素的类型 默认值是textname 为控件定义名称提供给服务端使用使用formname必须写value 控件的值真正传递给服务器的值/可发送的值例外所有的按钮的value都是设置按钮上的文本不是提交的值。disable 禁用 只能看不能改也不能提交,无值属性
3.12.3、表单控件 文本框 input typetext 属性 maxlength允许输入的最大字符数
readonly 无值属性 只能读不能改 但是可以提交
placeholder 占位提示符显示在控件上的提示内容 密码框 input typepassword 属性 maxlength允许输入的最大字符数
readonly 无值属性 只能读不能改 但是可以提交
placeholder 占位提示符显示在控件上的提示内容 按钮,所有的按钮的value都是设置按钮上显示的文本不是提交的值。 提交 type“submit”将表单中的数据收集并整理发送给服务器重置 type“reset”将当前的表单的内容恢复到初始化状态普通按钮type‘button’没有功能配合oncilck事件调用js脚本。为了提高可读性h5新出的button标签 同submit可以使用事件。 单选按钮 input typeradio 属性 必须有value属性必须有name属性不然没有分组即没有单选效果checked 无值属性 一个元素被设置该属性默认选中 案列
input typeradio namegender valueman checked 男
input typeradio namegender valueman 女
input typeradio namegender valueman 无法确定
!-- 没有name,一不能提交,二不能分组--!--value是提交的值,不加,提交的值会显示on -- 多选按钮 input typecheckbox 属性 必须有valuename 用于分组checked 无值属性默认选中 案例
form action methodgetbutton提交/buttoninput typecheckbox namehobby valueeat吃input typecheckbox namehobby valuedrink喝input typecheckbox namehobby valueplay玩input typecheckbox namehobby valuehappy乐
/form
!-- 没有name,一不能提交,二不能分组--!--value是提交的值,不加,提交的值会显示on --!--form表单自动提交,get请求,参数自动拼接在地址栏--
!-- http://xxxx/02.html?hobbyeathobbydrink... --隐藏文本域 input typehidden 想把数据提交给服务器但是又不想展示给用户看 文本选择块input typefile 使用文件选择框的前提 form的method必须是post没有大小限制enctype‘mulitipart/form-data’才能上传文件如果想要上传多个文件multiple无值属性设置多选 多行文本域 把文本域看作一个大的文本域,允许录入多行文本cols“5” rows“3” 设置文本域大小,但是计算机的内核和算法不同会导致值不准备 下拉选择框 select nameoption.../option.../select select 的属性 size默认值为11的时候显示形式是下拉选而1是滚动选择框multiple:无值属性设置多选 option属性 selected 无值属性 默认选中 option没有定义value那么select提交的value是选中的option的内容option有value那么select提交的value是选中option的value 表单控件其他元素 label标签 可以使用label替代form表单中span标签文本和表单控件的关联案例input idauto typecheckbox
label forauto请点我/label为控件分组 fieldset fieldset !-- 为控件分组--legend/legend !-- 分组标题--
/fieldsetfieldset legend用户的基本信息/legend 用户姓名: input typetext nameunamebr用户密码: input typepassword nameupwdbrinput idman typecheckbox naemgender valuemanlabel forman男/labelinput idwoman typecheckbox naemgender valuewomanlabel forwoman女/label
/fieldset
3.13、iframe 框架标签
iframe/iframe在一个html中引入其他的html属性 src 资源路径frameborder框架得边框scrolling框架得滚动条 no 不要滚动条 yes autoheightwidth
