海外仓网站建设,深圳网站策划推广,网站建的创新点,求职网站建设html 一、html51.1、理解html结构1.2、h1 - h6 (标题标签)1.3、p (段落和换行标签)1.4、br 换行标签1.5、文本格式化1.6、div 和 span 标签1.7、img 图像标签1.8、a 超链接标签1.9、table表格标签1.9.1、表格标签1.9.2、表格结构标签1.9.3、合并单元格 1.10、列表1.10.1、ul无序… html 一、html51.1、理解html结构1.2、h1 - h6 (标题标签)1.3、p (段落和换行标签)1.4、br 换行标签1.5、文本格式化1.6、div 和 span 标签1.7、img 图像标签1.8、a 超链接标签1.9、table表格标签1.9.1、表格标签1.9.2、表格结构标签1.9.3、合并单元格 1.10、列表1.10.1、ul无序列表1.10.2、ol有序列表1.10.3、自定义列表 1.11、表单标签1.11.1、form 表单域1.11.2、input 表单元素1.11.3、label 标签1.11.4、select表单元素1.11.5、textarea 表单元素 1.12、注释和特殊字符 一、html5
1.1、理解html结构
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
最简单的html页面
/body
/htmlhtml页面
!DOCTYPE不是一个 HTML 标签它就是 文档类型声明标签这句代码的意思是: 当前页面采取的是 HTML5 版本来显示网页 声明位于文档中的最前面的位置处于 标签之前。 不是一个 HTML 标签它就是 文档类型声明标签。
lang语言种类,用来定义当前文档显示的语言。
en定义语言为英语zh-CN定义语言为中文
meta charset UTF-8 /字符集 (Character set)是多个字符的集合。以便计算机能够识别和存储各种文字。 上面语法是必须要写的代码否则可能引起乱码的情况。一般情况下统一使用“UTF-8”编码尽量 统一写成标准的 “UTF-8”不要写成 “utf8” 或 “UTF8”。 1.2、h1 - h6 (标题标签)
作为标题使用并且依据重要性递减。
特点
加了标题的文字会变的加粗字号也会依次变大。一个标题独占一行。
代码示例 1.3、p (段落和换行标签)
p标签用于定义段落它可以将整个网页分为若干个段落。
特点
文本在一个段落中会根据浏览器窗口的大小自动换行。段落和段落之间保有空隙。
代码示例
1.4、br 换行标签
br /强制换行。 特点
br / 是个单标签。br / 标签只是简单地开始新的一行跟段落不一样段落之间会插入一些垂直的间距。
代码示例两个换行
1.5、文本格式化
在网页中有时需要为文字设置粗体、斜体 或下划线等效果这时就需要用到 HTML 中的文本格式化标签使文字以特殊的方式显示。
标签语义: 突出重要性, 比普通文字更重要.
语义标签加粗strongstrong/倾斜emem/删除线deldel/下划线insins/ 1.6、div 和 span 标签
div 和 span 是没有语义的它们就是一个盒子用来装内容的。
特点
div 标签用来布局但是现在一行只能放一个div大盒子span 标签用来布局一行上可以多个 span小盒子 1.7、img 图像标签
img 标签用于定义 HTML 页面中的图像。
img src图像URL /属性
属性属性值说明str图片路径必须属性alt文本替换文本。图像不能显示的文字title文本提示文本。鼠标放到图像上显示的文字width像素设置图像的宽度height像素设置图像的高度border像素设置图像的边框粗细
代码示例
相对路径 与 绝对路径
相对路径以引用文件所在位置为参考基础而建立出的目录路径。 绝对路径是指目录下的绝对位置直接到达目标位置通常是从盘符开始的路径。 例如“D:\web\img\logo.gif”或完整的网络地址“http://www.itcast.cn/images/logo.gif”。
1.8、a 超链接标签
a href跳转目标 target目标窗口的弹出方式 文本或图像 /a属性作用href用于指定链接目标的url地址(必须属性) 当为标签应用href属性时它就具有了超链接的功能target用于指定链接页面的打开方式其中_self为默认值_blank为在新窗口中打开方式。
链接分类
a标签 target 打开方式有如下 _blank新窗口打开。 _parent在父窗口中打开链接。 _self默认当前页面跳转。 _top在当前窗体打开链接并替换当前的整个窗体(框架页)。外部链接: 例如 a hrefhttp:// www.baidu.com 百度。内部链接:网站内部页面之间的相互链接. 直接链接内部页面名称即可例如 a href“index.html” 首页 。空链接: 如果当时没有确定链接目标时 a href“#” 首页 。下载链接: 如果 href 里面地址是一个文件或者压缩包会下载这个文件。网页元素链接: 在网页中的各种网页元素如文本、图像、表格、音频、视频等都可以添加超链接.锚点链接: 点我们点击链接,可以快速定位到页面中的某个位置. 在链接文本的 href 属性中设置属性值为 #名字 的形式如a href#two 第2集 /a找到目标位置标签里面添加一个 id 属性 刚才的名字 如h3 idtwo第2集介绍/h3
代码示例
1.9、table表格标签
1.9.1、表格标签 table aligncenter border1
!-- 表头--trth姓名/thth年龄/thth性别/th/tr
!-- 数据--trtd何某某/tdtd23/tdtd男/td/trtrtd某某何/tdtd23/tdtd女/td/tr/tabletable /table 是用于定义表格的标签。tr /tr 标签用于定义表格中的行必须嵌套在 table /table标签中。td /td用于定义表格中的单元格必须嵌套在tr/tr标签中。字母 td 指表格数据table data即数据单元格的内容。th 标签表示 HTML 表格的表头部分(table head 的缩写)一般表头单元格位于表格的第一行或第一列表头单元格里面的文本内容加粗居中显示.
表格属性 表格标签这部分属性我们实际开发我们不常用后面通过 CSS 来设置. 1.9.2、表格结构标签
因为表格可能很长,为了更好的表示表格的语义可以将表格分割成 表格头部和表格主体两大部分。
在表格标签中分别用thead标签 表格的头部区域、tbody标签 表格的主体区域. 这样可以更好的分清表格结构 代码示例 table aligncenter border1!-- 表头--theadtrth姓名/thth年龄/thth性别/th/tr/thead!-- 数据--tbodytrtd何某某/tdtd23/tdtd男/td/trtrtd某某何/tdtd23/tdtd女/td/tr/tbodythead/thead用于定义表格的头部。 内部必须拥有 标签。 一般是位于第一行。tbody/tbody用于定义表格的主体主要用于放数据本体 。以上标签都是放在table/table标签中。
1.9.3、合并单元格
合并单元格方式
跨行合并 rowspan“合并单元格的个数” 最上侧单元格为目标单元格, 写合并代码跨列合并 colspan“合并单元格的个数”最左侧单元格为目标单元格, 写合并代码 代码示例td rowspan2何某某/td
1.10、列表
1.10.1、ul无序列表
ul 标签表示 HTML 页面中项目的无序列表一般会以项目符号呈现列表项而列表项使用 li 标签定义无序列表的基本语法格式如下 无序列表的各个列表项之间没有顺序级别之分是并列的。ul/ul 中只能嵌套 li/li直接在 ul/ul 标签中输入其他标签或者文字的做法是不被允许的。li 与 /li 之间相当于一个容器可以容纳所有元素。无序列表会带有自己的样式属性但在实际使用时我们会使用 CSS 来设置。
1.10.2、ol有序列表
有序列表即为有排列顺序的列表其各个列表项会按照一定的顺序排列定义。 在 HTML 标签中ol 标签用于定义有序列表列表排序以数字来显示并且使用 li 标签来定义列表项。
有序列表的基本语法格式如下 ol/ol中只能嵌套li/li直接在ol/ol标签中输入其他标签或者文字的做法是不被允许的。li 与 /li之间相当于一个容器可以容纳所有元素。有序列表会带有自己样式属性但在实际使用时我们会使用 CSS 来设置。
1.10.3、自定义列表
自定义列表常用于对术语或名词进行解释和描述定义列表的列表项前没有任何项目符号。
使用场景 如下面 代码示例
dl/dl 里面只能包含 dt 和 dd。dt 和 dd个数没有限制经常是一个dt 对应多个dd。
1.11、表单标签
1.11.1、form 表单域
表单域是一个包含表单元素的区域。
在 HTML 标签中form标签用于定义表单域以实现用户信息的收集和传递。
form 会把它范围内的表单元素信息提交给服务器
form action“url地址” method“提交方式” name“表单域名称各种表单元素控件
/form常用属性
属性属性值作用actionurl地址用于指定接收并处理表单数据的服务器程序的url地址methodget / post用于设置表单数据的提交方式其取值为get 或 postname名称用于指定表单的名称以区分同一个页面中的多个表单域
1.11.2、input 表单元素
在 input 标签中包含一个 type 属性根据不同的 type 属性值输入字段拥有很多种形式可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等。
input type属性值 /type 属性的属性值及其描述如下
属性值描述button定义可点击按钮checkbox定义复选框file定义输入字段 和 ”浏览“ 按钮供文件上传hidden定义隐藏的输入字段image定义图像形式的按钮password定义密码字段该字段中的字符被掩码radio定义单选按钮reset定义重置按钮。重置按钮会清除表单中的所有数据submit定义提交按钮。提交按钮会把表单数据发送到服务器text定义单行的输入字段用户可在其中输入文本。默认宽度为20个字符color从拾色器中选取颜色date定义 date 日期控件,可选择年月日datetime-local定义 datetime 日期控件可选择年月日时分秒time定义用于输入时间的控件可选时分秒email定义用于 e-mail 地址的字段当提交表单时会自动对 email 字段的值进行验证number定义用于输入数字的字段您可以设置可接受数字的限制range定义用于精确值不重要的输入数字的控件比如 slider 控件
除 type 属性外标签还有其他很多属性其常用属性如下
属性属性值描述name由用户自定义定义input元素的名称value由用户自定义规定input元素的值checkedchecked规定此input元素首次加载时应当被选中maxlength正整数规定输入字段中的字符的最大长度
name 和value 是每个表单元素都有的属性值,主要给后台人员使用.name 表单元素的名字, 要求 单选按钮和复选框要有相同的name值.checked属性主要针对于单选按钮和复选框, 主要作用一打开页面,就要可以默认选中某个表单元素.maxlength 是用户可以在表单元素输入的最大字符数, 一般较少使用.
代码示例 1.11.3、label 标签
label 标签为 input 元素定义标注标签。
label 标签用于绑定一个表单元素, 当点击 标签内的文本时浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验
label forsex男/label
input typeradio namesex idsex /核心 label 标签的 for 属性应当与相关元素的 id 属性相同
代码示例 1.11.4、select表单元素
使用场景: 在页面中如果有多个选项让用户选择并且想要节约页面空间时我们可以使用select标签控件定义下拉列表。
selectoption value1选项1/optionoption value2选项2/optionoption value3选项3/option
/select代码示例 中至少包含一对 。在 中定义 selected “ selected 时当前项即为默认选中项。
1.11.5、textarea 表单元素
使用场景: 当用户输入内容较多的情况下我们就不能使用文本框表单了此时我们可以使用 textarea 标签。
在表单元素中textarea 标签是用于定义多行文本输入的控件。 使用多行文本输入控件可以输入更多的文字该控件常见于留言板评论。
textarea rows3 cols20文本内容
/textarea通过 标签可以轻松地创建多行文本输入框。cols“每行中的字符数” rows“显示的行数”我们在实际开发中不会使用都是用 CSS 来改变大小。
1.12、注释和特殊字符
html中注释以!--”开头以“ --结束。
!-- 注释语句 -- 快捷键: ctrl /
特殊字符
