做网站 要学 什么语言,深圳福田区有什么好玩的景点,建设电影网站如何盈利,网站建设内容论文JavaWeb笔记:Html总结
目录
JavaWeb笔记:Html总结
一、html简介
二、html基本标签 三、html表单标签(重点) 一、html简介 1、html是什么 Html是用来描述网页的一种语言。 (1)HTML 指的是超文本标记语言 (Hyper Text Markup Language) (2)H…JavaWeb笔记:Html总结
目录
JavaWeb笔记:Html总结
一、html简介
二、html基本标签 三、html表单标签(重点) 一、html简介 1、html是什么 Html是用来描述网页的一种语言。 (1)HTML 指的是超文本标记语言 (Hyper Text Markup Language) (2)HTML 不是一种编程语言而是一种标记语言(markup language,标记语言是一套标记标签(markup tag)); (3)HTML 使用标记标签来描述网页 超文本 标记 语言 语言 人与计算机交互的工具 超文本 (1)普通文本不能实现的超文本可以实现能实现普通文本不能实现的功能 (2)包括超链接的文本 标记 就是标签不同的标签能实现不同的功能 2、html能做什么 html通过标签的形式将信息展示给用户 3、html书写规范 (1)html结构 html head 包括资讯信息整个页面的属性、指导浏览器解析的标签、引入外部文件的标签 /head body 我们需要展示的信息 /body /html
(2)html标签是以尖括号包裹关键字成对出现的有开始标签和结束标签支持正确的嵌套 (3)大部分标签有属性 格式属性“属性值”多个属性之间用空格隔开 (4)空标签功能比较单一 例如br/br br/ (5)html不区分大小写建议使用小写 需求写一段文字将其中的部分文字变成红色字号变大 html head/head body 我请大家吃狗不理font colorred size5包子/font br/ 大家很高兴 /body /html 二、html基本标签 1、文件标签(结构标签) htmlhtml:根标签 head title/title:页面的标题 /head body/body内容 属性 text:文本的颜色 bgcolor:背景色 background:背景图片 颜色的三种表示方式 (1)单词red green black (2)rgb三原色reg(0,0,0) 0-255 (3)#000000 #ffffff #325687 #377405 2、排版标签 (1)注释标签!--注释-- (2)换行标签br/ (3)段落标签p文本文字/p 特点段与段之间有空行 属性 align:对齐方式有三个属性值left center right (4)水平线标签hr/ 属性 width:长度 size:粗度 color颜色 align:对齐方式 尺寸的写法 1像素10px 2百分比占据副标签的百分比会随着副标签的大小进行变化 3、块标签 div/div:行级块标签 span/span:行内块标签 作用 1div/divdivcss布局 2span/span进行友好提示 4、文字标签 基本文字标签font/font 属性 color:颜色 size:大小最大值:7最小值:1默认值:3 face:字体类型即字体直接写文字就可以 标题标签h1/h1-h6/h6 随着数字的增大逐渐变小字体是加粗的内置字号 默认占据一行 5、清单标签也称为列表标签 无序列表ul/ul li/li:列表项 属性 type有三个值分别为disc、 square和circle 示例 ul li列表项/li li列表项/li li列表项/li /ul 有序列表ol/ol li/li:列表项 属性 type1、A、a、I、i数字、字母、罗马数字 start:数字代表首项开始位置 示例 ol li列表项/li li列表项/li li列表项/li /ol 列表标签的作用实现菜单项可以实现横向或者纵向菜单 无序列表标签怎么去掉小圆点HTML中不能直接去掉没有这个属性值需要在CSS中给li标签添加样式list-style:none; 6、图形标签img /自关闭标签 属性 src:图形地址 width:宽度 height:高度 border:边框 align:对齐方式代表图片与相邻的文本的相对位置有三个属性值top middle bottom alt:图片的文字说明 7、链接标签a/a 属性 href:跳转页面地址 name:名称锚点 target:_self(自己) _blank(新页面,之前的页面还有) 默认是_self 作用 1页面跳转注意要调到外网必须要加协议 2访问锚点回到锚点顶部、底部、中间在访问锚点时的书写格式#name的值 8、表格标签 table/table: 属性 border:表格边框 width:表格的宽度 align:表格的对齐方式tr aligncenter单元格里面的内容居中对齐tr bgcolor:背景颜色 tr/tr: 代表行 td/td代表单元格 属性 colspan:列合并 rowspan:行合并 th/th相等于td, 只是内置样式加粗居中 caption/caption表格的标题即表头 表格的作用 (1)简单的实现一个表格样式 (2)进行页面布局 示例 table tr!--行-- th表格标头/th td普通单元格/td /tr /table thead/thead、tbody/tbody、tfoot/tfoot 作用分块加载用户体验比较好 三、html表单标签(重点) 1、form标签form/form 属性 name:表单名称 action:提交的路径地址 method:提交方式get和post get和post的区别重点 (1)get提交将数据加在地址栏的后面格式?namevaluenamevaluepost提交将数据封装在请求体中 ?usernamezhangsanpassword123sexmalehobbyfootballhobbypaiqiucitybj# (2)get提交相对不安全post提交相对安全 (3)get提交有大小限制根据浏览器不同而不同post不限制大小 示例 form table !--form里面嵌套table-- /table /form 2、input标签input type / type属性:根据type属性实现各种不同功能的表单项 text普通的文本输入框 nameusername value张三!--张三是默认值-- password密码输入框特点是显示的是掩码 radio单选按钮 name如果想让一组单选按钮互斥就用指定同意name属性值需要加value属性值 checked默认被选中 checkbox复选框 name组的概念需要加value属性值。 checked默认被选中 file上传文件的控件 button普通按钮没有任何内置的功能 submit内置功能点击会按照action地址提交 reset重置点击会清空之前填写的内容 image图片按钮功能类似与submit src加载图片 alt:图片的提示文字 hidden:隐藏表单作用是在提交数据的时候服务器需要这个数据但是不需要用户看到。 注意name属性必须要写。 3、select标签(select/select)下拉菜单 属性 name;表单项的名称 option标签可选项下拉菜单之间的级联 属性 value表单项的值 selected默认被选中 4、textarea:文本域标签 属性 cols列数 rows行数 注意默认的文本值在标签体当中 四、html框架标签及其他 1、框架标签 frameset: 属性 rows按行划分 cols按列划分 划分格式 rows120,* frame: 属性 name名称方便target根据name值进行定位 src:加载的页面地址 2、其他标签 meta meta http-equivkeywords contentkeyword1,keyword2,keyword3 meta http-equivdescription contentthis is my page meta http-equivcontent-type contenttext/html; charsetUTF-8 link link relstylesheet typetext/css href./styles.css href引入css文件的地址 script script typetext/javascript src/script srcjs的文件地址 3、特殊字符 nbsp; 空格 gt; 大于号 lt; 小于号 copy; 版权符号 reg; 注册符号
