如何连接到网站服务器,百度关键词怎么做,苏州商品关键词优化,网站用什么做备份HTML基础 网页#xff0c;浏览器#xff0c;web标准HTML语法规范和基本结构标签!DOCTYPE#xff0c;lang标签和字符集作用HTML常用标签HTML注释和特殊字符 表格标签列表标签表单标签 网页#xff0c;浏览器#xff0c;web标准
一#xff1a;网页
网页是图片#xff0c… HTML基础 网页浏览器web标准HTML语法规范和基本结构标签!DOCTYPElang标签和字符集作用HTML常用标签HTML注释和特殊字符 表格标签列表标签表单标签 网页浏览器web标准
一网页
网页是图片链接文字声音视频等元素组成的其实就是一个HTML文件。 网页生成制作是由前端人员书写HTML文件然后经过浏览器渲染点开浏览器就可以看到网页。 HTML超文本标记语言是用来制作网页的一门语言。由标签组成例如图片标签链接标签视频标签。
二浏览器
常用的五大浏览器IE,火狐谷歌Safari和Opera 浏览器内核负责读取网页内容整讯信息计算网页的显示页面。
浏览器内核谷歌BlinkIETridentOperaPrestoSafariwebkit火狐Gecko
三web标准
Web标准是由W3C组织和其他标准化组织制定的一系列标准的集合。 1.那么为什么需要Web标准呢 因为浏览器不同他们所显示的页面活着排版就会有些许差异。 2.Web标准的构成 Web标准主要包括结构表现行为三个方面。
标准说明结构结构用于对网页元素进行整理和分类表现表现用于设置网页元素的版式颜色大小等外观样式。行为行为是指网页模型的定义及交互的编写
Web标准提出的最佳体验方案结构样式行为相分离。 HTML语法规范和基本结构标签
一语法规范
1.HTML标签是由尖括号包围的关键词例如 html. 2.HTML标签通常是成对出现的例如 html 和 /html我们称之为双标签。 3.有些特殊的标签必须是单个标签例如 br /
二HTML基本结构标签
每个网页都会有一个基本结构标签
标签名说明 html页面中最大的标签我们称之为根标签 head注意在head标签中我们必须要设置的标签是title title让页面拥有一个属于自己的网页标题 body元素包含文档的所有内容页面内容基本都是放到body里面的 !DOCTYPElang标签和字符集作用
VSCode工具生成骨架标签新增代码
一 !DOCTYPE
1. !DOCTYPE文档类型声明作用就是告诉浏览器使用那种HTML版本来显示网页。 2. !DOCTYPE声明位于文档中的最前面的位置处于 html标签之前。 3. !DOCTYPE不是一个HTML标签他就是文档类型声明标签。
*二 lang lang是用来定义当前文档显示的语言 1.en定义语言为英语 2.zh-CN定义语言为中文
三字符集
1.字符集是多个字符的集合以便计算机能够识别和储存各种文字。 2.在 head标签内可以通过 meta标签的charset属性来规定HTML文档应该使用那种字符编码。 3.charset常用的值有GB2312GBK和UTF-8其中UTF-8被称为万国码基本包含了全世界所有国家需要用到的字符。 HTML常用标签
一标题标签 h1– h6
为了使网页更具有语义化我们经常会在页面中用到标题标签HTML提供了6个等级的网页标题即 h1– h6。 标签语义作为标题使用并且依据重要性递减。 特点 1.加了标题的标签文字会变粗字号会变大。 2.一个标题独占一行
二段落标签 p标签用于定义段落它可以将整个网页分为若干个段落。 标签语义可以把HTML文档分割为若干个段落。 特点 1.文本在一个段落中会根据浏览器窗口大小自动换行。 2.段落和段落之间保有空隙。
三换行标签 br /标签强制将某段文本换行显示 标签语义强制换行 特点 1. br /是个单标签 2. br /标签只是简单地开始新的一行跟段落不一样段落之间会插入一些垂直的间距。
四 文本格式化标签
在网页中有时需要为文字设置粗体斜体或下划线等效果这时候就需要用到文本格式化标签。 标签语义突出重要性。
语义标签加粗 strong倾斜 em删除线 del下划线 ins 五 div和 span标签 div和 span没有语义他们就是一个盒子用来装内容。 特点 1. div标签用来布局一行只能放一个 div大盒子。 2. span标签用来布局一行上可以多个 span。小盒子。
六图像标签和路径
1.图像标签 img src“图像URL” / src是 img标签的必须属性它用于指定图像文件的路径和文件名 图像标签的其它属性
属性说明src必须属性alt替换文本图像不能显示时候显示的文字title提示文本鼠标放在图片上显示的文字width设置图像的宽度(像素)height设置图像的高度(像素)border设置图像的边框粗细 注意点 1图像标签可以有多个属性必须写在标签名的后面。 2属性之间不分先后顺序标签名与属性属性与属性之间均以空格隔开。 3属性采取键值对的格式即keyvalue的格式属性“属性值”。
2.路径
首先需要知道两个概念 目录文件夹就是普通的文件夹里面只不过存放了我们做页面的文件图片等。
根目录打开目录文件夹的第一层就是根目录
(1)相对路径
以引用文件所在位置为参考基础而建立出的目录路径。
相对路径分类说明同一级路径图像文件位于HTML文件的同一级下一级路径图像文件位于HTML文件下一级上一级路径图像文件位于HTML文件的上一级 (2)绝对路径
是指目录下的绝对位置直接到大目标位置通常是从盘符开始的路径 七超链接标签
1.链接的语法格式 a href跳转目标 target目标窗口弹出方式文本或图像 /a
属性作用href用于指定链接目标的URL地址必须属性target用于指定链接页面的打开方式
对于target属性_self为默认值在本窗口打开。 _blank为在新窗口中打开。
2.链接的分类
(1)外部链接 a href“http://www.baidu.com”百度 /a 2内部链接网站内部页面之间的相互链接直接链接内部页面名即可。 3空连接如果当时没有确定链接目标时 a href#首页 /a有链接标识但是打不开 (4)下载链接如果href里面地址是一个文件或者压缩包会下载这个文件。 5网页元素链接在网页中的各种网页元素如文本图像表格音频等都可以添加超链接。 6锚点链接当我们点击链接可以快速定位到页面中的某个位置。 HTML注释和特殊字符
一注释
快捷键ctrl /
二特殊字符 表格标签
一表格标签的基本使用
1.表格标签的作用 表格不是用来布局页面的是用来展示数据的 2.表格的基本语法 1 table是用于定义表格的标签。 2 tr标签用于定义表格中的行必须嵌套在 table标签中。 3 td用于定义表格中的单元格必须嵌套在 tr标签中。
二表头单元格标签使用
一般表头单元格位于表格的第一行或第一列表头单元格里面的文本内容加粗居中显示 th标签表示html表格的表头部分
三表格属性
属性名描述align规定表格相对周围元素的对齐方式border规定表格单元是否拥有边框cellpadding规定单元边沿与其内容之间的空白cellspacing规定单元格之间的空白width规定表格的宽度 四表格结构标签
1. thead用于定义表格的头部。 thead内部必须拥有 tr标签。一般位于第一行。 2. tbody用于定义表格的主体主要用于放数据本体。 3.以上标签都在 table /table标签之中。
五合并单元格
跨行合并rowspan合并单元格个数 跨列合并colspan合并单元格的个数 1.先确定是跨行还是跨列合并。 2.找到目标单元格写上合并方式合并的单元格数量 3.删除多余单元格 列表标签
一无序列表 ul标签表示HTML页面中项目的无序列表以 li标签来定义列表项。 特点 1.无序列表的各个列表相之间没有顺序级之分是并列的。 2. ul /ul中只能嵌套 li /li。 3. li /li之间相当于一个容器可以容纳所有元素。 4.无序列表会带有自己的样式属性。
二有序列表
有序列表即为有排列顺序的列表其中各个列表会按照一定的顺序排列定义。 ol标签用于定义有序列表并且使用 li标签来定义列表项
三自定义列表
在HTML中, dl标签用于定义描述列表该标签会与 dt(定义项目)和 dd描述项目一起使用 表单标签
一为什么需要表单 使用表单目的是为了收集用户信息。 在我们网页中我们也需要跟用户进行交互收集用户信息此时就需要用到表单。
二表单是由哪几部分组成的 在HTML中一个完整的表单通常是由表单域表单控件也称表单元素和提示信息3个部分组成
三表单域 表单域是一个包含表单元素的区域。 在HTML中 form标签用于定义表单域以实现用户信息的收集和传递。 form会把它范围内的表单元素信息提交给服务器。
属性作用action用于指定接受并处理表单数据的服务器程序的URL地址method用于设置表单数据的提交方式取值为get或postname用于指定表单名称以区分同一页面中的多个表单域
四表单控件表单元素 1.input输入表单元素 input标签用于收集用户信息。 在 input标签中包含一个type属性根据不同的type属性值输入字段拥有很多种形式。 type属性的属性值及其描述如下
属性值描述button定义可点击按钮checkbox定义复选框file定义输入字段和“浏览”按钮供文件上传hidden定义隐藏的输入字段image定义图像形式的提交按钮password定义密码字段该字段的字符被掩码radio定义单选按钮reset定义重置按钮。重置按钮会清除表单中的所有数据submit定义提交按钮。提交按钮会把表单数据发送到服务器text定义单行的输入字段用户可在其中输入文本
1text定义单行的输入字段用户可在其中输入文本 2password定义密码字段该字段的字符被掩码 3radio定义单选按钮 4checkbox定义复选框 5submit定义提交按钮。提交按钮会把表单数据发送到服务器 6reset定义重置按钮。重置按钮会清除表单中的所有数据 7button定义可点击按钮 8file定义输入字段和“浏览”按钮供文件上传 2.除了type属性外其它属性
属性描述name定义input元素的名称value规定input元素的值checked规定input元素首次加载时应当被选中maxlength规定输入字段中的字符的最大长度
1name属性name是表单元素的名字单选按钮必须有相同的name才可以多选一。 2value是每个标签都要有的属性主要是为了供给后台人员使用 3checked属性单选按钮和复选框可以设置checked属性当页面打开的时候就可以默认选中 4maxlength属性规定输入字段中的字符的最大长度例如maxlength“6”最多输入6个字符再多就输不进去了。 3.label标签 label标签用于绑定一个表单元素当点击 label标签内的文本时浏览器就会自动将焦点跳转到选择对应的表单元素上用来增加用户体验 关键 label标签的for属性应当与相关元素的id属性相同 4.select下拉表单标签 5.textarea表单标签 写完要手要废掉了! 直接嘤嘤嘤~~~
