梧州做网站建设,游艇 高端网站建设,天津塘沽爆炸案处理结果,百度导航如何设置公司地址文章目录零、本讲学习目标一、HTML基础#xff08;一#xff09;HTML简介1、HTML2、HTML语言的基本格式3、!DOCTYPE声明4、html标签5、head标签6、body标签7、编写第一个网页8、关于编写HTML文件的工具9、HTML标签概述#xff08;1#xff09;单标签#xff08;2一HTML简介1、HTML2、HTML语言的基本格式3、!DOCTYPE声明4、html标签5、head标签6、body标签7、编写第一个网页8、关于编写HTML文件的工具9、HTML标签概述1单标签2双标签3注释标签二、常用的HTML标签一段落、行内和换行标签二文本样式标签三表格标签四表单标签1、表单域\form\2、表单控件\input\三、CSS技术四、JavaScript基础五、Bootstrap框架基础六、Bootstrap框架的常用组件零、本讲学习目标
熟悉HTML标签的使用掌握CSS样式的引用方式掌握CSS选择器的常用属性熟悉DOM与BOM的相关知识掌握JavaScript的使用熟悉Bootstrap框架的下载与使用掌握BootStrap框架的常用组件 在学习Java Web开发之前读者首先需要了解一些网页开发的基础知识。说到网页其实大家并不陌生我们上网查询信息时就是在浏览网页。网页可以看作是承载各种网站应用和信息的容器网站的所有可视化内容都会通过网页展示给用户。本讲将围绕HTML技术、CSS技术以及JavaScript技术对网页开发基础知识进行讲解。 一、HTML基础
一HTML简介
1、HTML
HTML是英文Hyper Text Markup Language的缩写中文译为“超文本标记语言”。HTML主要作用是通过HTML标签对网页中的文本、图片、声音等内容进行描述。HTML网页就是一个后缀名为“.html”或“.htm”的文件它可以用记事本打开因此简单的html代码可以在记事本中编写。编写完成后将文件后缀名修改为“.html”或“.htm”即可生成一个HTML网页。
2、HTML语言的基本格式 3、!DOCTYPE声明
!DOCTYPE声明必须是 HTML 文档的第一行位于 标签之前。!DOCTYPE声明不是 HTML 标签是一条指令它用于向浏览器说明当前文档使用哪种HTML标准规范网页在开头处使用!DOCTYPE声明为所有的HTML文档指定HTML版本和类型这样浏览器将该网页作为有效的HTML文档并按指定的文档类型进行解析。!DOCTYPE声明和浏览器的兼容性相关!DOCTYPE声明被删除后如何展示HTML页面的权利就交给了浏览器即页面的显示效果由浏览器决定。
4、html标签
html标签位于!DOCTYPE声明之后被称为根标签。根标签主要用于告知浏览器该文档是一个HTML文档。其中html标签标志着HTML文档的开始/html标签则标志着HTML文档的结束它们之间是文档的头部和主体内容。
5、head标签
head标签用于定义HTML文档的头部信息也被称为头部标签。head标签紧跟在html之后主要用于封装其他位于文档头部的标签如title、meta、link及style等标签。
6、body标签
body标签用于定义HTML文档所要显示的内容也被称为主体标签。浏览器中显示的所有文本、图像、音频和视频等信息都必须位于body标签内才能最终展示给用户。需要注意的是一个HTML文档只能含有一对body标签且body标签必须在html标签内位于head标签之后与head标签是并列关系。
7、编写第一个网页 在D:\web_work里创建一个名称为chapter01的文件夹然后在该文件夹中新建一个文本文件.txt后缀将文件的名称更改为htmlDemo01后缀名改为.html。 在htmlDemo01.html文件中编写代码 运行程序使用浏览器打开htmlDemo01.html文件
8、关于编写HTML文件的工具 读者在编写HTML文件时可以使用系统自带的记事本编写也可以使用Notepad、EditPlus、UltraEdit、HBuilder或IDEA等工具编写HTML文件当使用工具创建HTML文件时文件中的基本标签会被自动创建编辑工具还会有代码颜色和代码提示功能开发者只需根据需求完善功能代码即可工具的使用有助于提高编码效率减少出错率。 Notepad编辑器 HBuilder开发工具 IDEA开发工具
9、HTML标签概述
1单标签
单标签也被称为“空标签”是指用一个标签符号就可以完整地描述某个功能的标签。单标签基本语法格式标签名 /注意在标签名与“/”之间有一个空格虽然在显示效果上有无空格都一样但是按照规范的要求建议加上空格。为什么要有单标签HTML标签的作用原理是选择网页内容进行描述也就是说需要描述谁就选择谁所以才会有双标签的出现双标签有开始和结束标签。而单标签本身就可以描述一个功能不需要选择谁例如水平线标签hr /按照双标签的语法它应该写成“hr/hr”但是水平线标签不需要选择谁它本身就代表一条水平线此时写成双标签就显得有点多余但是又不能没有结束符号所以单标签的语法格式就是在标签名称后面加一个关闭符即为标签名 /。
2双标签
双标签也称体标签是指由开始和结束两个标签符组成的标签。双标签基本语法格式标签名内容/标签名
3注释标签
在HTML中还有一种特殊的标签——注释标签如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字就需要使用注释标签。注释标签的基本语法格式!--注释语句--注意注释内容不会显示在浏览器窗口中但是作为HTML文档内容的一部分注释标签可以被下载到用户的计算机上或者用户查看源代码时也可以看到注释标签。
二、常用的HTML标签
一段落、行内和换行标签
目标熟悉HTML的段内、行内和换行标签在chapter01文件夹中新建HTML文件htmlDemo02.html
!DOCTYPE html
htmlheadmeta charsetutf-8titlehtmlDemo02/title/headbodyp相思/ppspan红豆生南国br /春来发几枝。br /劝君多采撷br /此物最相思。/span/p/body
/html运行程序使用浏览器打开htmlDemo02.html文件
二文本样式标签
目标熟悉HTML的文本样式标签在HTML中使用font标签控制网页中文本的样式如字体、字号和颜色font标签的基本语法格式font 属性属性值文本内容/font在chapter01文件夹中新建HTML文件htmlDemo03.html
!DOCTYPE html
htmlheadmeta charsetutf-8titlehtmlDemo03/title/headbody默认样式文本踏青寻芳br /font face微软雅黑 size7 colorgreen微软7号绿色文本春满人间/font/body
/html运行程序使用浏览器打开htmlDemo03.html文件
三表格标签
目标掌握表格标签学会使用border属性改变表格的边框在HTML网页中要想创建表格需要使用相关的表格标签才能创建表格在HTML网页中创建表格的基本语法格式
tabletrtd单元格内的文字/td/tr
/table注意table、tr和td是创建表格的基本标签缺一不可。table用于定义一个表格tr用于定义表格中的行(table row)必须嵌套在table标签中td用于定义表格中的单元格table data也可称为表格中的列必须嵌套在tr标签中。在chapter01文件夹中创建一个HTML文件htmlDemo04.html 运行程序使用浏览器打开htmlDemo04.html文件 注意如果border属性的值发生改变那么只有围绕表格的边框尺寸会发生变化表格内部的边框还是1像素宽。如果将border的属性值设置为0或者删除border属性将显示没有边框的表格。
四表单标签
目标掌握表单标签学会使用表单标签收集数据信息表单就是在网页上用于输入信息的区域它的主要功能是收集数据信息并将这些信息传递给后台信息处理模块。例如注册页面中的用户名和密码输入、性别选择、提交按钮等都是用表单中的相关标签定义的。 1、表单域form
在HTML中form标签用于定义表单域即创建一个表单。form标签基本语法
form actionurl地址 method提交方式 name表单名称各种表单控件
/formaction属性用于指定表单提交的地址。method属性用于设置表单数据的提交方式它有GET和POST两个值其中GET为默认值这种方式提交的数据将显示在浏览器的地址栏中保密性差且有数据量限制而使用POST提交方式不但保密性好还可以提交大量的数据因此开发中通常使用POST方式提交表单。
2、表单控件input 浏览网页时经常会看到单行文本输入框、单选按钮、复选框、重置按钮等使用input控件可以在表单中定义这些元素。 intput控件基本语法格式input type控件类型 / type属性为input控件最基本的属性用来指定不同的控件类型。 input控件还可以定义很多其他属性其中比较常用的有id、name、value、size它们分别用来指定input控件的ID值、名称、控件中的默认值和控件在页面中的显示宽度。 在chapter01文件夹中创建一个HTML文件htmlDemo05.html添加表单并设置提交方式为POST再定义一个2列的表格 在htmlDemo05.html中添加用户名输入控件和密码输入框控件 在htmlDemo05.html中添加性别选择控件和复选框控件 在htmlDemo05.html中添加文件上传控件、提交按钮控件和重置按钮 查看页面完整代码
!DOCTYPE html
htmlheadmeta charsetutf-8titlehtmlDemo05/title/headbodyform action# methodposttable cellpadding2 aligncentertrtd alignright用户名/tdtd!-- 1.文本输入框控件 --input typetext nameusername / /td/trtrtd alignright密码/td!-- 2.密码输入框控件 --tdinput typepassword namepassword //td/trtrtd alignright性别/tdtdinput typeradio namegender valuemale / 男 input typeradio namegender valuefemale / 女 /td/trtrtd alignright兴趣/tdtdinput typecheckbox nameinterest valuefilm / 看电影input typecheckbox nameinterest valuecode / 敲代码input typecheckbox nameinterest valuegame / 玩游戏/td/trtrtd alignright头像/tdtdinput typefile namephoto //td/trtrtd colspan2 aligncenterinput typesubmit value注册 / input typereset value重填 / /td/tr/table/form/body
/html运行程序使用浏览器打开htmlDemo05.html文件 给表单加一个有标题的边框
!DOCTYPE html
htmlheadmeta charsetutf-8titlehtmlDemo05/title/headbody form action# methodpostfieldsetlegend新用户注册/legendtable cellpadding2 aligncentertrtd alignright用户名/tdtd!-- 1.文本输入框控件 --input typetext nameusername / /td/trtrtd alignright密码/td!-- 2.密码输入框控件 --tdinput typepassword namepassword //td/trtrtd alignright性别/tdtdinput typeradio namegender valuemale / 男 input typeradio namegender valuefemale / 女 /td/trtrtd alignright兴趣/tdtdinput typecheckbox nameinterest valuefilm / 看电影input typecheckbox nameinterest valuecode / 敲代码input typecheckbox nameinterest valuegame / 玩游戏/td/trtrtd alignright头像/tdtdinput typefile namephoto //td/trtrtd colspan2 aligncenterinput typesubmit value注册 / input typereset value重填 / /td/tr/table/fieldset/form/body
/html运行程序使用浏览器打开htmlDemo05.html文件
三、CSS技术
四、JavaScript基础
五、Bootstrap框架基础
六、Bootstrap框架的常用组件
