01 html的学习笔记
来源：互联网 发布：淘宝生产许可证怎么办 编辑：程序博客网 时间：2024/06/05 13:15
HTML的学习笔记
一、HTML的简介
1.HTML是什么
HTML是用来描述网页的一种语言。
HTML是超文本标记语言。
HTML不是一种编程语言，而是一种标记语言。
标记语言是一套标记标签。
HTML使用标记标签来描述网页。
超文本 标记 语言
语言：人与计算机交互的工具
超文本：（1）普通文本不能实现的，超文本可以实现，能实现普通文本不能实现的功能
（2）包括超链接的文本
标记：就是标签，不同的标签能实现不同的功能
2.HTML的作用
HTML通过标签的形式将信息展示给用户
3.html的书写规范
需求：写一段文字将其中的部分文字变成红色，字号变大
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello html</title>
</head>
<body>
hello<br/>
<font color="red" size="5px">html</font>!
</body>
</html>
架构：
（1）html结构
<html>
<head>
包括咨询信息：整个页面的属性、指导游览器解析的标签、引入外部文件的标签
</head>
<body>
展示给用户的信息
</body>
</html>
（2）HTML标签是以尖括号包裹关键字成对出现的，有开始标签，有结束标签。
（3）大部分标签有属性 格式：属性=“属性值” 多个属性值用空格隔开
（4）空标签 功能比较单一 <br></br> === <br/>
（5）html标签不区分大小写 建议使用小写
二、html的基本标签
1.文件标签（结构标签）
<html>:根标签
<head>
<title>:页面的标题标签
<body>:页面的内容
属性：
text:文本的颜色
bgcolor：背景色
background：背景图片
颜色：（1）单词 red green black purple
（2）rgb三原色：reg(0,0,0) 0-255
（3）#000000 黑色 #ffffff 白色
（4）取色神器：ColorPicker
2.排版标签
（1）编写工具：sublime text（注释快捷键ctrl+/）；eclipse（注释快捷键ctrl+shift+/ 定位文件位置alt+enter）；myeclipse；
（2）注释标签：ctrl+shift+/
（3）换行标签：<br/>
（4）段落标签：<p>文本文字</p> 特点：段与段之间有空行
属性：align:对齐方式 left居左 center居中 right居右
（5）水平线标签：<hr/>
属性：width：长度 size：粗度 color：颜色 align：对齐方式
尺寸的写法：像素：10px 百分比：占据百分比50% 区别：百分比会随着父标签的大小进行变化
3.块标签
（1）div：行级块标签
（2）span：行内块标签
（3）作用 div：div+cssbuju
span：进行友好提示
4.文字标签
（1）基本文字标签<font>
属性：color：颜色 size:大小 最大值为7 最小值1 默认值3 face：字体的类型
（2）标题标签：
<h1>-<h6> 标题标签是依次减小的 默认占据一行
5.清单标签（列表标签）
（1）无序列表：<ul>
<li>:列表项
属性：type:disc square circle
（2）有序列表：<ol>
<li>列表项
6.图形标签
<img>
src:图形标签
width：图片的宽度
height:图片的高度
border：边框
align：对齐方式 代表图片与相邻的文本的相对位置
alt:图片的文字说明
7.链接标签
<a>
属性：href 跳转的页面的地址
name 名称 锚点
target _blank空白页打开 _self自己页面打开 默认是_self
作用：
（1）页面跳转
注意：访问互联网上的资源前面必须带上协议http://
（2）锚点访问
href在访问锚点的时候，书写格式#name的值
<a name="top"></a>
<a href="#top">top</a>
8.表格标签
<table border="1" width="50%" align="center">
<caption></caption>
<tr>
<th>1-1</th>
<th>1-2</th>
</tr>
<tr>
<td colspan="2">2-1</td>
<td rowspan"2">2-2</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
</tr>
<table>
<table>
属性：border：表格边框
width：表格的宽度
align：表格的对齐方式
<tr>代表行
<td>代表单元格
属性：colspan：列合并
rowspan：行合并
<th>代表表头
<caption>代表表格的标题
作用：（1）简单的实现一个表格样式
（2）进行布局
<thead>
<tbody>
<tfoot>
作用：分块加载，用户体验比较好
9.bookstore的案例
三、html的表单标签（重点）
1.form标签
<form></form>
属性： name：表单名称
action:提交的地址
method:提交方式 get post
get和post的区别：
（1）get提交将数据加在地址栏的后面， 格式？name=value&name=value,而post提交将数据封装在请求体中
（2）get提交相对不安全 post提交相对安全
（3）get提交有大小限制，根据游览器不同而不同 post不限制大小
2.input标签
属性： type:根据type值的不同会显示不同功能表单项
text:普通的文本框
password:密码输入框 特点：显示掩码
radio:单选按钮 注意：组的概念，如果想让一组单选按钮互斥，必须name属性相同
checked:代表默认被选中
checkbox:复选框 注意：组的概念，如果想让一组复选按钮，必须name属性相同
checked:代表默认被选中
file:上传文件
button：普通按钮，没有任何内置的功能
submit:提交按钮，点击表单，按照action地址进行提交
reset：重置按钮，点击会将表单清空
image:图片按钮
属性：src：图片的地址
alt：图片的文字信息
hidden：隐藏表单 作用：服务端需要但是不需要用户看到
3.select标签
属性：
name：表单项的名称
option：代表一个选择项
属性：value
selected：默认被选中的项
4.textarea标签
属性：cols：列数
rows：行数
注意：默认的文本值在标签体当中
四、html的框架标签及其他
1.框架标签
frameset：
属性：cols：按列划分
rows：按行划分
划分的格式 rows=“120，*“ *代表剩余
frame：
属性：name：名称 方便target根据name值进行定位
src：加载页面的路径
2.其他标签
<meta>
<link>
<link rel="stylesheet" type="text/css" href=""> href:引入css文件地址
<script>
<script type="text/javascript" src=""></script> src：js的文件地址
3.特殊字符
空格
> 大于
< 小于
© 版权符号
® 注册符号
一、HTML的简介
1.HTML是什么
HTML是用来描述网页的一种语言。
HTML是超文本标记语言。
HTML不是一种编程语言，而是一种标记语言。
标记语言是一套标记标签。
HTML使用标记标签来描述网页。
超文本 标记 语言
语言：人与计算机交互的工具
超文本：（1）普通文本不能实现的，超文本可以实现，能实现普通文本不能实现的功能
（2）包括超链接的文本
标记：就是标签，不同的标签能实现不同的功能
2.HTML的作用
HTML通过标签的形式将信息展示给用户
3.html的书写规范
需求：写一段文字将其中的部分文字变成红色，字号变大
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello html</title>
</head>
<body>
hello<br/>
<font color="red" size="5px">html</font>!
</body>
</html>
架构：
（1）html结构
<html>
<head>
包括咨询信息：整个页面的属性、指导游览器解析的标签、引入外部文件的标签
</head>
<body>
展示给用户的信息
</body>
</html>
（2）HTML标签是以尖括号包裹关键字成对出现的，有开始标签，有结束标签。
（3）大部分标签有属性 格式：属性=“属性值” 多个属性值用空格隔开
（4）空标签 功能比较单一 <br></br> === <br/>
（5）html标签不区分大小写 建议使用小写
二、html的基本标签
1.文件标签（结构标签）
<html>:根标签
<head>
<title>:页面的标题标签
<body>:页面的内容
属性：
text:文本的颜色
bgcolor：背景色
background：背景图片
颜色：（1）单词 red green black purple
（2）rgb三原色：reg(0,0,0) 0-255
（3）#000000 黑色 #ffffff 白色
（4）取色神器：ColorPicker
2.排版标签
（1）编写工具：sublime text（注释快捷键ctrl+/）；eclipse（注释快捷键ctrl+shift+/ 定位文件位置alt+enter）；myeclipse；
（2）注释标签：ctrl+shift+/
（3）换行标签：<br/>
（4）段落标签：<p>文本文字</p> 特点：段与段之间有空行
属性：align:对齐方式 left居左 center居中 right居右
（5）水平线标签：<hr/>
属性：width：长度 size：粗度 color：颜色 align：对齐方式
尺寸的写法：像素：10px 百分比：占据百分比50% 区别：百分比会随着父标签的大小进行变化
3.块标签
（1）div：行级块标签
（2）span：行内块标签
（3）作用 div：div+cssbuju
span：进行友好提示
4.文字标签
（1）基本文字标签<font>
属性：color：颜色 size:大小 最大值为7 最小值1 默认值3 face：字体的类型
（2）标题标签：
<h1>-<h6> 标题标签是依次减小的 默认占据一行
5.清单标签（列表标签）
（1）无序列表：<ul>
<li>:列表项
属性：type:disc square circle
（2）有序列表：<ol>
<li>列表项
6.图形标签
<img>
src:图形标签
width：图片的宽度
height:图片的高度
border：边框
align：对齐方式 代表图片与相邻的文本的相对位置
alt:图片的文字说明
7.链接标签
<a>
属性：href 跳转的页面的地址
name 名称 锚点
target _blank空白页打开 _self自己页面打开 默认是_self
作用：
（1）页面跳转
注意：访问互联网上的资源前面必须带上协议http://
（2）锚点访问
href在访问锚点的时候，书写格式#name的值
<a name="top"></a>
<a href="#top">top</a>
8.表格标签
<table border="1" width="50%" align="center">
<caption></caption>
<tr>
<th>1-1</th>
<th>1-2</th>
</tr>
<tr>
<td colspan="2">2-1</td>
<td rowspan"2">2-2</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
</tr>
<table>
<table>
属性：border：表格边框
width：表格的宽度
align：表格的对齐方式
<tr>代表行
<td>代表单元格
属性：colspan：列合并
rowspan：行合并
<th>代表表头
<caption>代表表格的标题
作用：（1）简单的实现一个表格样式
（2）进行布局
<thead>
<tbody>
<tfoot>
作用：分块加载，用户体验比较好
9.bookstore的案例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <div id="page"> <div id="top"> <table width="100%"> <tr> <td width="70%"> <img alt="logo" src="images/logo.png"/> </td> <td> <img alt="cart" src="images/cart.gif"/> <a href="#">购物车</a> <a href="#">帮助中心</a> <a href="#">我的账户</a> <a href="#">新用户注册</a> </td> </tr> </table> </div> <div id="mennu"> <table width="100%" bgcolor="#1C3F09"> <tr align="center"> <td> <a href="#"><font color="#ffffff">文学</font></a> <a href="#"><font color="#ffffff">生活</font></a> <a href="#"><font color="#ffffff">计算机</font></a> <a href="#"><font color="#ffffff">外语</font></a> <a href="#"><font color="#ffffff">经管</font></a> <a href="#"><font color="#ffffff">励志</font></a> <a href="#"><font color="#ffffff">社科</font></a> <a href="#"><font color="#ffffff">学术</font></a> <a href="#"><font color="#ffffff">少儿</font></a> <a href="#"><font color="#ffffff">艺术</font></a> <a href="#"><font color="#ffffff">原版</font></a> <a href="#"><font color="#ffffff">科技</font></a> <a href="#"><font color="#ffffff">考试</font></a> <a href="#"><font color="#ffffff">生活百科</font></a> <a href="#"><font color="yellow">全部商品目录</font></a> </td> </tr> </table> </div> <div id="search"> <table bgcolor="#b6b684" width="100%"> <tr align="right"> <td> Search <input type="text"> <input type="button" value="搜索"> </td> </tr> </table> </div> <div id="content"> <div align="right"> 首页 > 旅游 >图书列表 </div> <h1>商品服务</h1> <hr/> <h1>计算机类</h1> <span>共5k商品</span> <hr/> <div> <img alt="productlist" src="images/productlist.gif" width="100%"> </div> <div> <table width="100%"> <tr align="center"> <td> <div> <img alt="" src="bookcover/101.jpg"> </div> <div> <span>书名：xxx</span><br/> <span>售价：xxx</span> </div> </td> <td> <div> <img alt="" src="bookcover/102.jpg"> </div> <div> <span>书名：xxx</span><br/> <span>售价：xxx</span> </div> </td> <td> <div> <img alt="" src="bookcover/103.jpg"> </div> <div> <span>书名：xxx</span><br/> <span>售价：xxx</span> </div> </td> <td> <div> <img alt="" src="bookcover/104.jpg"> </div> <div> <span>书名：xxx</span><br/> <span>售价：xxx</span> </div> </td> </tr> <tr align="center"> <td> <div> <img alt="" src="bookcover/105.jpg"> </div> <div> <span>书名：xxx</span><br/> <span>售价：xxx</span> </div> </td> <td> <div> <img alt="" src="bookcover/106.jpg"> </div> <div> <span>书名：xxx</span><br/> <span>售价：xxx</span> </div> </td> <td> <div> <img alt="" src="bookcover/107.jpg"> </div> <div> <span>书名：xxx</span><br/> <span>售价：xxx</span> </div> </td> <td> <div> <img alt="" src="bookcover/code.jpg" width="130" height="197"> </div> <div> <span>书名：xxx</span><br/> <span>售价：xxx</span> </div> </td> </tr> </table> </div> </div> <div id="bottom"> <table width="100%" bgcolor="#EFEEDC"> <tr> <td rowspan="2"> <img alt="" src="images/logo.png"> </td> <td> CONTACT US </td> </tr> <tr> <td> copyright 2008 © BookStore All Rights RESERVED </td> </tr> </table> </div> </div> </body> </html>
三、html的表单标签（重点）
1.form标签
<form></form>
属性： name：表单名称
action:提交的地址
method:提交方式 get post
get和post的区别：
（1）get提交将数据加在地址栏的后面， 格式？name=value&name=value,而post提交将数据封装在请求体中
（2）get提交相对不安全 post提交相对安全
（3）get提交有大小限制，根据游览器不同而不同 post不限制大小
2.input标签
属性： type:根据type值的不同会显示不同功能表单项
text:普通的文本框
password:密码输入框 特点：显示掩码
radio:单选按钮 注意：组的概念，如果想让一组单选按钮互斥，必须name属性相同
checked:代表默认被选中
checkbox:复选框 注意：组的概念，如果想让一组复选按钮，必须name属性相同
checked:代表默认被选中
file:上传文件
button：普通按钮，没有任何内置的功能
submit:提交按钮，点击表单，按照action地址进行提交
reset：重置按钮，点击会将表单清空
image:图片按钮
属性：src：图片的地址
alt：图片的文字信息
hidden：隐藏表单 作用：服务端需要但是不需要用户看到
3.select标签
属性：
name：表单项的名称
option：代表一个选择项
属性：value
selected：默认被选中的项
4.textarea标签
属性：cols：列数
rows：行数
注意：默认的文本值在标签体当中
四、html的框架标签及其他
1.框架标签
frameset：
属性：cols：按列划分
rows：按行划分
划分的格式 rows=“120，*“ *代表剩余
frame：
属性：name：名称 方便target根据name值进行定位
src：加载页面的路径
2.其他标签
<meta>
<link>
<link rel="stylesheet" type="text/css" href=""> href:引入css文件地址
<script>
<script type="text/javascript" src=""></script> src：js的文件地址
3.特殊字符
空格
> 大于
< 小于
© 版权符号
® 注册符号
阅读全文
0 0
- 01 html的学习笔记
- 学习HTML的笔记
- HTML的学习笔记
- Html的学习笔记
- HTML的学习笔记
- HTML学习笔记01
- 01html学习笔记
- 基本的 HTML 学习笔记
- html学习的一些笔记
- 我的HTML学习笔记
- 【HTML】HTML学习笔记
- 暑假快速学习html的学习笔记
- Html学习笔记1：学习html的路线和学习方法
- HTML学习笔记01(最基本的格式)
- 【学习笔记】 html学习
- [学习笔记]HTML 5的元素
- ajax自学笔记-html的学习
- 快速学习html、css的经典笔记
- python︱sklearn一些小技巧的记录（pipeline...）
- PAT A1096.Consecutive Factors
- 移植Qt
- mysql 基本操作
- jdk并发工具包之锁
- 01 html的学习笔记
- C++数独求解程序(阿里巴巴社招笔试题)对比：包括新加坡总理李显龙的程序
- English words page nine
- 一个js函数的改进（实现动画效果）
- 【BZOJ1060】【ZJOI2007】时态同步
- 读书笔记∣商务与经济统计Ch.1-3
- 170909 WarGames-Utumno（0-1）
- mysql innoDB的REPEATABLE READ MVCC事务实现方式
- html与css第三天
