day01_html学习笔记
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学习笔记 ----------------------------------------------------------------------------- 一、html简介 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> ----------------------------------------------------------------------------- 二、html基本标签 1、文件标签（又叫结构标签） <html>html> 根标签 <head> <title>title> 页面的标题 head> <body>body> 内容 属性： text 整个文本的颜色 bgcolor 背景色 background 背景图片 示例： <html> <head> 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 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">div1div> <div style="background-color:green">div2div> <span style="background-color:blue">span1span> <span style="background-color:pink">span2span> -------------------------------------- 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">topa> -------------------------------------- 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--1th> <th>1--2th> <th>1--3th> tr> <tr align="center"> <td rowspan="2">2--1td> <td colspan="2">2--2td> tr> <tr align="center"> <td>3--2td> <td>3--3td> tr> table>
<thead>thead> <tbody>tbody> <tfoot>tfoot> 作用：分块加载，用户体验比较好。（这三个标签基本不用了，因为现在布局用CSS了） ----------------------------------------------------------------------------- 三、html表单标签（重点） 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> table> form> -------------------------------------- 2、input标签 <input type=" "/> type 根据type的值不同实现各种不同功能的表单项 text 普通的文本输入框 name="username" value="张三" password 密码输入框；特点是显示的是掩码 name="password" value="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> ----------------------------------------------------------------------------- 四、html框架标签及其他标签 1、框架标签 <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） =============================================================================
我的GitHub地址： https://github.com/heizemingjun
我的博客园地址： http://www.cnblogs.com/chenmingjun
我的蚂蚁笔记博客地址： http://blog.leanote.com/chenmingjun
Copyright ©2018 黑泽明军
【转载文章务必保留出处和署名，谢谢！】