您的位置：首页 > Web前端 > HTML

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>




<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）
=============================================================================
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航