day01_html学习笔记
2018-04-17 00:00
344 查看
day01_html学习笔记
============================================================================= ============================================================================= 涉及到的知识点有: 一、html简介 1、html是什么? 2、html能做什么(html的作用)? 3、html书写规范 二、html基本标签 1、文件标签(又叫结构标签) 2、排版标签 3、块标签 4、文字标签 5、清单标签(也称为列表标签) 6、图形标签 7、链接标签 8、表格标签 三、html表单标签(重点) 1、form标签 2、input标签 3、select标签 4、文本域标签 四、html框架标签及其他 1、框架标签 2、其他标签 3、特殊字符 ============================================================================= ============================================================================= day01_html学习笔记 ----------------------------------------------------------------------------- [b]一、html简介[/b] 1、html是什么? html是用来描述网页的一种语言。 (1) HTML 指的是超文本标记语言(Hyper Text Markup Language)。 (2) HTML 不是一种编程语言,而是一种标记语言(markup language),标记语言是一套标记标签(markup tag)(包括:HTML XML XHTML)。 (3) HTML 使用标记标签来描述网页。 超文本 标记 语言 超文本: (1) 普通文本不能实现的,超文本可以实现,能实现普通文本不能实现的功能,表达能力优于普通文本如声音、图形等。 (2) 包括超链接的文本。 标记: 就是标签,不同的标签能实现不同的功能。 语言: 人与计算机交互的工具。 -------------------------------------- 2、html能做什么(html的作用)? html通过标签的形式将信息展示给用户。 HTML文档的后缀名? 答:.html/.htm 以上两种后缀名没有区别。 -------------------------------------- 3、html书写规范 (1) html基本结构 <html> <head> 包括资讯信息:即整个页面的属性、指导浏览器解析的标签、引入外部文件的标签(CSS和js)。 </head> <body> 我们需要展示的信息(正文)。 </body> </html> -------------------------------------- (2) html标签是以尖括号包裹关键字成对出现的,有开始标签和结束标签(又叫围堵标签),支持正确的嵌套。 (3) 大部分标签有属性 格式:属性="属性值"(多个属性之间用空格隔开) (4) 空标签:功能比较单一 。例如:<br></br> = <br/>(又叫自闭合标签) (5) html不区分大小写,建议使用小写。 注意:所有标记语言,标签中的英文单词没有以数字开头的。比如<1234>。 注意:HTML中不支持:空格、回车、制表符,他们都会被解析成一个空白字符 注意:空的html标签解释 没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。 <br> 就是没有关闭标签的空元素(<br> 标签定义换行)。 在开始标签中添加斜杠,比如 <br/>,是关闭空元素的正确方法,HTML、XHTML 和 XML 都接受这种方式。 即使 <br> 在所有浏览器中都是有效的,但使用 <br /> 其实是更长远的保障。 需求:写一段文字,将其中的部分文字变成红色,字号变大。 <html> <head></head> <body> 我请大家吃狗不理<font color="red" size="5">包子</font>, <br/> 大家很高兴!!! </body> </html> ----------------------------------------------------------------------------- [b]二、html基本标签[/b] 1、文件标签(又叫结构标签) <html></html> 根标签 <head> <title></title> 页面的标题 </head> <body></body> 内容 属性: text 整个文本的颜色 bgcolor 背景色 background 背景图片 示例: <html> <head> <!--<title>我的第一个html页面</title>--> </head> <body text="green" bgcolor="black" background="images/bg.jpg"> 我请大家吃狗不理<font color="red" size="5">包子</font>, <br/> 大家很高兴!!! </body> </html> 颜色的三种表示方式: (1) 直接填写颜色的英文名称:red、green、black... (2) rgb三原色:reg(0,0,0) 0-255 (3) #FF0000(红色)、#FFFF00(黄色)、#0000FF(蓝色)、 #00FF00(绿色)、#FFFFFF(白色)、#00FFFF(青色)、#000000(黑色) 注意:(2)和(3)没有关系,(3)最常用。 -------------------------------------- 2、排版标签 (1) 注释标签 (2) 换行标签 <br/> (3) 段落标签 <p>文本文字</p> 特点:段与段之间有空行 属性:align 对齐方式 :left、center、right 属性(align)已过时。 在HTML5文档中不鼓励使用它。 在 HTML 4.01 中,不赞成使用 p 元素的 align 属性; 在 XHTML 1.0 Strict DTD 中,不支持 p 元素的 align 属性。 请使用 CSS 代替。CSS 语法:<p style="text-align:right"> (4) 水平线标签 <hr/> 属性: width 长度 size 粗度 color 颜色 align 对齐方式 在 HTML 4.01 中,hr 元素的所有呈现属性均不被赞成使用。 在 XHTML 1.0 Strict DTD 中,hr 元素的所有呈现属性均不被支持。请使用样式取代它。 尺寸的写法: 像素 写法:10px(px可写可不写) 百分 比写法:占据副标签的百分比 50% 区别:尺寸百分比的写法会随着副标签的大小进行变化。 表示缩进,nbsp是英文Non-Breaking SPace的缩写,可以直接翻译成“不被折断的空格”。 示例: 春夜喜雨<br/> 杜甫<br/> <hr width="50%" size="50px" color="red" align="left"/> <!-- <p align="center"> --> <p style="text-align:center"> 好雨知时节<br/> 当春乃发生<br/> 随风潜入夜<br/> 润物细无声<br/> <p> 野径云俱黑<br/> 江船火烛明<br/> 晓看红湿处<br/> 花重锦官城<br/> -------------------------------------- 3、块标签 <div></div> 行级块标签 <span></span> 行内块标签 作用: (1) <div></div> div+css布局 (2) <span></span> 一般用于进行友好提示 示例: <div style="background-color:red">div1</div> <div style="background-color:green">div2</div> <span style="background-color:blue">span1</span> <span style="background-color:pink">span2</span> -------------------------------------- 4、文字标签 基本文字标签:<font></font> 属性: color 颜色 size 大小(最大值:7,最小值:1,默认值:3) 最大值:7 最小值:1 默认值:3 face 字体类型,即字体,直接写文字就可以。 标题标签:<h1></h1> -- <h6></h6> 随着数字的增大逐渐变小,默认字体是加粗的且内置字号,默认占据一行。 -------------------------------------- 5、清单标签(也称为列表标签) 无序列表:<ul></ul> 属性: type 有三个值,分别为disc、 square和circle <li></li> 列表项 示例: <ul type="square"> <li>列表项</li> <li>列表项</li> <li>列表项</li> </ul> 有序列表:<ol></ol> 属性: type 1、A、a、I、i(数字、字母、罗马数字) start 数字,代表首项开始位置 <li></li> 列表项 示例: <ol type="A" start="2"> <li>列表项</li> <li>列表项</li> <li>列表项</li> </ol> 列表标签的作用: 一般用于实现菜单项(可以实现横向或者纵向菜单) 无序列表标签怎么去掉小圆点? 答:HTML中不能直接去掉,没有这个属性值,需要在CSS中给li标签添加样式 list-style:none; -------------------------------------- 6、图形标签 <img/>(自关闭标签) 属性: src 图形地址 width 宽度 height高度 border 边框 align 对齐方式,代表图片与相邻的文本的相对位置(有三个属性值:top、middle、bottom) alt 图片的文字说明 示例: <img src="images/1.jpg" alt="mm一枚" width="50%" height="73%" border="5" align="bottom"/> -------------------------------------- 7、链接标签 <a></a> 属性: href 跳转页面地址 name 名称,锚点 target _self(自己本页面) _blank(新页面,之前的页面还有),默认是_self 作用: (1) 页面跳转 注意:要调到外网必须要加协议 http:// (2) 访问锚点 回到锚点(顶部top、中间bottom、底部middle),在访问锚点时的书写格式:#name的值; (3) 定位到框架的某个位置。 示例: <a href="http://www.baidu.com" target="_blank">点击我吧 哈哈</a><br> <a name="top"></a> 嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻<br/> 嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻<br/> 嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻<br/> ... ... ... <a href="#top">top</a> -------------------------------------- 8、表格标签 <table></table> 属性: border 表格边框 width 表格的宽度 align 表格的对齐方式(<tr align="center"></tr> 表示单元格里面的内容居中对齐) bgcolor 背景颜色 <tr></tr> 代表行 <td></td> 代表单元格 属性: rowspan 行合并 colspan 列合并 <th></th> 相当于<td>,只是内置样式加粗居中 <caption></caption> 表格的标题,即表头 表格的作用: (1) 简单的实现一个表格样式。 (2) 进行页面布局。(该作用被CSS替代了) 示例: <table border="1" width="50%" align="center" bgcolor="yellow"> <caption>19成绩表</caption> <tr align="center"> <th>1--1</th> <th>1--2</th> <th>1--3</th> </tr> <tr align="center"> <td rowspan="2">2--1</td> <td colspan="2">2--2</td> </tr> <tr align="center"> <td>3--2</td> <td>3--3</td> </tr> </table>
![](https://images2018.cnblogs.com/blog/841693/201804/841693-20180424154300683-1913570470.png)
<thead></thead> <tbody></tbody> <tfoot></tfoot> 作用:分块加载,用户体验比较好。(这三个标签基本不用了,因为现在布局用CSS了) ----------------------------------------------------------------------------- [b]三、html表单标签(重点)[/b] 1、form标签 <form></form> 属性: name 表单名称 action 提交的路径地址 method 常用提交方式(get和post),默认是get提交 get和post的区别(重点): (1) get提交:将数据加在地址栏的后面,格式: file:///D:/learn/Java/MyEclipse/Workspaces/MyEclipse%202017%20CI/day01_html/WebRoot/表单标签/form.html ?username=zhangsan&password=123&sex=male&hobby=football&hobby=paiqiu&city=bj# 即:?name=value&name=value...# post提交:将数据封装在请求体中(http中会学),格式: file:///D:/learn/Java/MyEclipse/Workspaces/MyEclipse%202017%20CI/day01_html/WebRoot/表单标签/form.html# 即:# (2) get提交相对不安全,post提交相对安全。 (3) get提交有大小限制,根据浏览器不同而不同,post提交不限制大小。 示例: <form> <table> <!--form里面嵌套table--> </table> </form> -------------------------------------- 2、input标签 <input type=" "/> type 根据type的值不同实现各种不同功能的表单项 text 普通的文本输入框 name="username" value="张三" <!--张三是文本输入框的默认值--> password 密码输入框;特点是显示的是掩码 name="password" value="123456" <!--123456是密码输入框的默认值--> radio 单选按钮 name 如果想让一组单选按钮互斥,就用指定相同的name属性值,再加value属性值(提交的时候用) checked 默认被选中 checkbox 复选框(多选) name 组的概念,就用指定相同的name属性值,再加value属性值(提交的时候用) checked 默认被选中 file 上传文件的控件 button 普通按钮,没有任何内置的功能 value="注册" <!--注册是普通按钮上的默认值(名字)--> submit 内置功能,点击会按照action地址提交 reset 重置,点击会清空之前填写的内容,恢复默认值 image 图片按钮,功能类似与submit src 加载图片 alt 图片的提示文字 hidden 隐藏表单和内容,作用是在提交数据的时候,服务器需要这个数据,但是用户看不到(开发中常用) <input type="hidden" name="hide" value="xxxx"/> <p hidden="hidden">这是一段隐藏的段落。</p> <!--这句话用户看不到--> <p>这是一段可见的段落。</p> 注意:开发中name属性必须要写。 -------------------------------------- 3、select标签 <select></select> 用于下拉菜单 属性: name 表单项的名称(提交的时候用) <option></option> 可选项(下拉菜单之间的级联) 属性: value 表单项的值 selected 默认被选中 示例: <select name="city"> <option value="bj">北京</option> <option value="sh" selected="selected">上海</option> <option value="gz">广州</option> <option value="sz">深圳</option> </select> <select> <option>海淀</option> <option>朝阳</option> <option>昌平</option> </select> -------------------------------------- 4、文本域标签 <textarea></textarea> 属性: rows 行数 cols 列数 注意: 默认的文本值在标签体当中。 示例: <textarea name="textarea" rows="20" cols="50">这是文本区域</textarea> ----------------------------------------------------------------------------- [b]四、html框架标签及其他标签 1、框架标签 [/b]<frameset></frameset> 属性: rows 按行划分 cols 按列划分 划分格式: rows="120,*" <frame/> 属性: name 名称,方便target根据name值进行定位 src 加载的页面地址 注意: <frameset></frameset>与<body></body>会打架,二者不能共存。 -------------------------------------- 2、其他标签 <meta/> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"/> <meta http-equiv="description" content="this is my page"/> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <link/> <link rel="stylesheet" type="text/css" href="./styles.css"/> href 引入css文件的地址 <script></script> <script type="text/javascript" src=""></script> src 引入js的文件地址 -------------------------------------- 3、特殊字符 一个英文空格 > 大于号 < 小于号 © 版权符号(圈C) ® 注册符号(圈R) =============================================================================
相关文章推荐
- HTML&CSS基础学习笔记1.26-给网页添加一个css样式
- WEB学习笔记(二):HTML5比常用的HTML多了哪些?
- ASP.NET 3.5核心编程学习笔记(5):HTML控件
- <笔记> HTML 学习——1
- html学习笔记——html发展历程
- [HTML]网页开发学习笔记
- HTML学习笔记3
- 【C#】通过HtmlAgilityPack+XPath来优化网页采集学习笔记
- html学习笔记
- html学习笔记
- html5学习笔记3 HTML简介(二)
- HTML学习笔记:框架与画中画
- HTML+CSS学习笔记 (七)
- HTML和CSS的学习笔记(二)
- HTML入门学习笔记--CSS盒子模型(6)
- HTML学习笔记
- Html 学习笔记1
- HTML 学习笔记1 ——html样式
- MVC学习笔记五:HTML辅助方法【上】
- HTML&CSS基础学习笔记1.14-创建表格