前端学习（一）：HTML基本语法 |
您所在的位置：网站首页 › 图像标签的基本语法是什么 › 前端学习（一）：HTML基本语法 |
|
文章目录
认识web常见的浏览器内核web标准
什么是HTMLHTML的骨架标签HTML元素标签分类双标签单标签
HTML标签关系HTML编写工具文档类型页面语言lang字符集HTML标签的语义化
HTML标签排版标签标题标签h段落标签p水平线标签 hr换行标签 br
div和span标签文本格式挂标签标签属性图像标签链接标签注释标签锚点定位base标签预格式化文本pre标签特殊字符表格创建表格表格属性表头单元格标签th表格标题caption合并单元格表格结构的划分
列表无序列表ul有序列表ol自定义列表dl
表单input控件label标签textarea控件（文本域）select下拉列表form表单域
认识web
什么是网页：网页主要由文字、图像、超链接等元素构成，当然除了这些元素，网页中还可以包含音频、视频以及flash等等网页的形成：html/css代码通过浏览器的渲染，最终呈现好看的网页什么是浏览器：浏览器是网页显示、运行的平台，常用的浏览器有IE、谷歌、火狐、Safari等
常见的浏览器内核
浏览器内核备注IETridentIE、猎豹安全、360极速、百度浏览器firefoxGecko打开速度慢，升级频繁safariwebkit苹果专用chromechromium/blink在chromium项目中研发blink渲染引擎，内置于chrome浏览器之中，blink是webkit的分支，大部分国产浏览器采用blink内核进行二次开发operablink跟随chrome使用blink内核
web标准
重点内容：web标准的三层 web标准：不是一个具体的标准，而是由w3c组织和其它标准化组织制定的一系列标准的集合 w3c：万维网联盟是国际最著名的标准化组织，类似于联合国的地位 为什么要遵循web标准：如果不遵循标准，不同浏览器渲染出来的界面可能不同 web标准的好处：遵循web标准可以让我们写的页面更统一 让web发展前景更广阔内容能被更广泛的设备访问更容易被搜索引擎搜索降低网站流量费用使网站更易于维护提高页面的浏览速度撒web标准的构成： 结构（structure）：结构用于对网页元素进行整理和分类，主要是html表现（presentation）：表现用于设置网页元素的版式、颜色、大小等外观样式，主要是css行为（behavior）：是指网页模型的定义及交互的编写，主要是javascript 什么是HTML html：超文本标记语言（hyper text markup language），是用来表述网页的html不是一种编程语言，而是一种标记语言标记语言是一套标记标签（markup tags）所有的html标签都是用表示的超文本： 它可以加入图片、声音、动画、多媒体等内容（超越文本限制）可以从一个文件跳转到另一个文件（超级链接文本） HTML的骨架标签HTML有自己的语言语法骨架格式 标签名定义说明HTML标签页面中最大的标签，称为根标签文档的头部head标签中必须设置title文档的标题页面显示的网页标题文档的身体包含文档的所有内容 HTML元素标签分类标签：在HTML页面中，带有符号的元素被称为HTML标签，如上面提到的、 都是HTML骨架标签 分类：常规元素（双标签）、空元素（单标签） 双标签内容 比如我爸是李刚 该语法中 表示该标签的作用开始，一般称为开始标签（start tag），表示该标签的结束，一般称为结束标签（end tag）和开始标签相比，结束标签只是在前面加上一个关闭符/大部分标签都是双标签 单标签比如 空元素用单标签来表示，里面不需要包含内容，只有一个开始标签，而不需要关闭标签单标签比较少 HTML标签关系 嵌套关系 并列关系 HTML编写工具推荐使用sublime+emmet插件，可以实现以下特殊效果 在html结尾的文件中，输入html:5或!后按tab键，自动生成html骨架自动补全标签通过安装插件，实现全中文显示右键在浏览器中直接打开利用sublime生成的骨架 Document 文档类型写法： 作用：该声明位于文档中最前面的位置，处于标签之前，此标签告诉浏览器文档使用哪种HTML或XHTML规范 HTML文件必须加上DOCTYPE声明，并统一使用HTML5的文档声明 页面语言lang指定HTML标签使用的语言 最常见的值 en定义语言为英语 zh-CN定义语言为中文 字符集字符集（charset）是多个字符的集合 计算机要准确的处理各种字符集文字，需要进行字符编码，以便计算机能够识别和存储各种文字 utf-8s是目前最常用的字符集编码方式，常用的字符集编码方式还有gbk和gb2312 gb2312：简体中文，包括6763个汉字BIG5：繁体中文，港澳台使用GBK：包含全部中文，是GB2312的扩展，加入了繁体UTF-8基本上包含全世界所有国家用到的字符 HTML标签的语义化标签语义化：就是指标签的含义，可以让结构显得更清晰 语义是否良好：当我们去掉CSS之后，网页结构是否依然组织有序，并且有良好的可读性 遵循的原则：先确定语义的HTML，再选合适的CSS HTML标签 排版标签排版标签主要和CSS搭配使用，显示网页的结构，是网页布局最常用的标签 标题标签h为了使网页更具有语义化，经常在页面中使用标题标签，HTML提供了6个等级的标题，并且依据重要性递减，基本语法格式如下 一级标题 二级标题 三级标题 四级标题 五级标题 六级标题 一行只能放一个标题加了标题的文字会加粗，字号也会变大 段落标签p段落标签paragraph：把HTML文档分割为若干个段落 文本内容 段落标签是HTML文档中最常见的标签，默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行 水平线标签 hr水平线标签horizontal：用水平线将段落与段落之间分开，使得文档结构清晰，层次分明，它是单标签 换行标签 br换行标签：break，它也是一个单标签 在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后自动换行 如果希望强制换行显示，就要使用换行标签 div和span标签div和span是没有语义的，是网页布局主要的两个盒子 今日头条 又日头条 div和span都是盒子，用来装网页元素，主要区别如下： div标签：用来布局，一行只能放一个divspan标签：用来布局，一行可以放多个span 文本格式挂标签在网页中，有时需要为文本设置加粗、斜体、下划线效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示 标签显示效果 粗体方式显示，推荐strong 斜体方式显示，推荐em 加删除线方式显示，推荐del 加下划线方式显示，推荐ins 标签属性属性，就是外在特性，在制作网页时，如果想让HTML提供更多的信息，可以使用HTML标签的属性设置，其基本语法格式如下 内容 苹果手机就是大 标签有两个特点： 标签拥有多个属性，必须写在开始标签中，位于标签名后属性之间不分先后顺序，标签名与属性、属性与属性之间以空格分开 图像标签image：图像 要在网页中显示图片，就需要使用图像标签，它是一个单身标签，语法如下 img src="图像URL" src属性是必需属性，指定图片的路径和名字 图像标签还有很多其它属性 属性属性值描述srcURL图像的路径alt文本图像不能显示时的替换文本title文本鼠标悬停时显示的内容width像素设置图像的宽度height像素设置图像的高度border数字设置图像边框的高度border一般是用CSS来做，所以这里不需要关注 链接标签anchor：锚 在HTML中创建超链接非常简单，只需要用标签把文字包括起来就好，格式如下 文本或图像 属性描述href指定目标地址，是必须属性target默认值是_self，在当前窗口打开，可以设置为_blank在新窗口打开 外部链接：如 src="http://www.baidu.com"内部链接：如 src="demo.html"空链接：如src="#"，点击后没有任何变化 注释标签在HTML中还有一种特殊的标签：注释标签 如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签，虽然不会显示到浏览器中，但是作为HTML的一部分，会被下载到用户电脑上 语法格式： 快捷键：ctrl + / 锚点定位通过创建锚点链接，用户可以快速定位到目标内容 创建锚点链接分为两步： 使用相应的id名标记目标位置 跳到这里 使用链接标签进行跳转 链接文本 base标签 base可以设置整体链接的打开状态base写到head标签之间可以设置所有链接新页面打开 预格式化文本pre标签 文本被包围在pre标签中的文本被保留空格和换行符，文本呈现为等宽字体 一般比较少用 特殊字符一些特殊的符号，在HTML中很难或者不方便直接使用，就需要使用替代代码 以**运算符&开头，以分号;**结尾它们不是标签，而是符号 特殊字符描述字符的代码空格空格符号;大于号;&和;￥人民币¥©版权©®注册上标®°度数°±正负±×乘×÷除÷上标平方²平方sup2;上标立方³立方sup3; 表格目的：用来展示数据，可以让数据整齐规范 创建表格在HTML中，用table标签创建表格，基本语法如下 单元格1内的文字 单元格2内的文字 ...在表格中，有3种标签 table：定义一个表格tr：定义表格中的行，嵌套在table标签在中td：定义表格的单元格内容，嵌套在tr标签中 表格属性 属性名含义常用属性值border设置表格的边框（默认为0无边框）像素值cellspacing设置单元格与单元格边框之间的空白距离像素值默认2cellpadding设置单元格内容与单元格边框之间的空白间距像素值默认1width设置表格的宽度像素值height设置表格的高度像素值align设置表格在网页中的水平对齐方式left、center、right 表头单元格标签th 作用：一般表头单元格位于表格的第一行或第一列，并且文本加粗居中语法：只需要用表头标签替代相应的单元格标签即可 表格标题caption定义和用法： 我是表格标题说明： caption元素定义表格标题，通常该标题会居中显示于表格之上captain必须紧随table标签之后这个标签只有在表格中才有意义 合并单元格合并单元格的两种方式： 跨行合并：rowspan=“合并单元格的个数"跨列合并：colspan="合并单元格的个数"合并单元格的顺序：先上后下，先左后右 合并单元格的步骤： 确定是跨行还是跨列根据合并顺序找到目标单元格，然后写上合并方式和数量删除多余的单元格 表格结构的划分 ：用于定义表格的头部，用来存放标题之类的东西，内部必须拥有标签：用于定义表格的主体，存放数据本体：存放表格的注脚之类的以上标签都是在table标签内部 列表目的：用来布局，让布局整齐规范 概念：列表的容器中，装着结构样式一致的文字或图表 特点：整齐、整洁、有序，跟表格类似，但是列表的组合自由度更高 无序列表ulunordered list：无序列表就是各个表项之间没有顺序级别之分，是并列的 桃子 苹果 葡萄 椰子注意： ul标签中必须，也只能嵌套li标签li标签中间相当于一个容器，可以嵌套任何元素无序列表有默认的样式属性，可以通过CSS进行更改 有序列表olordered list：有序列表即有排列顺序的列表，其中各个表项按照一定的顺序排列定义 美国 中国 俄罗斯 英国 日本与无序列表的特点基本一致，但是实际中用的较少 自定义列表dldefined list：自定义列表常用于对术语或名词进行解释和描述，自定义列表的列表项前没有任何项目符号 名词1 名词1解释1 名词1解释2 名词2 名词2解释1 名词2解释2 表单目的：用来收集用户的信息 在HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息、表单域3部分构成 表单控件：包含了具体的表单功能项， 如单行文本输入框、密码输入框、复选框、提交按钮等提示信息：一个表单中通常需要一个说明性的文字，提示用户进行填写和操作表单域：相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过它定义处理表单所用程序的url地址，以及数据提交到服务器的方法，如果没有定义表单域，则后台服务器无法拿到表单数据 input控件提示文本 属性属性值描述typetext单行文本输入框password密码输入框radio单选按钮checkbox复选框button普通按钮submit提交按钮reset重置按钮image图像形式的提交按钮file文件域name由用户定义控件的名称value由用户定义input控件中的默认文本值size正整数input控件在页面中的显示宽度checkedchecked定义选择控件默认被选中的项maxlength正整数控件允许输入的最多字符数type属性：通过改变type属性的值，可以决定使用那种input表单 values属性：一般为显示的默认文本值 name属性：后台通过name找到这个表单，name主要用于区分不同的表单项 checked属性：表示默认选中的状态，常用于单选和复选 label标签目的：当鼠标点击lable标签中的文字时，光标会自动定位到指定的表单里面，主要是为了提高用户体验 方法一：lable中直接包含Input表单 用户名： 方法二：for和id搭配使用 用户名： textarea控件（文本域）作用：通过该控件，实现多行文本框的输入和显示 使用格式： 要显示的文本内容 select下拉列表目的：如果有多个选项，为了节省空间，可以做成下拉列表 选项1 选项2 选项3 选项4请注意： select标签中至少要包含一个option元素在option中，可以定义selected属性，表示默认选中状态 form表单域目的：将收集到的用户信息传递给服务器 使用格式： input等表单控件放在这里其中： action：用于指定接收并处理表单数据的服务器程序的url地址method：用于设置表单数据的提交方式，取值为get或postname：用于指定表单的名称，以区别同一页面中的多个表单 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |