02-Html学习
来源：互联网 发布：三国讲了什么知乎 编辑：程序博客网 时间：2024/06/07 19:29
使用绝对路径和相对路径的使用格式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title></head><body> 使用图片的绝对路径 <img src="C:\Users\RAY\Pictures\Saved Pictures\timg.jpg" alt="绝对路径图片" title="这是什么呢" /><br /> 使用图片的相对路径 <img src="3.jpg" alt="同一级" /> <img src="img/1.jpg" alt="图片在文件的下一级" /> <img src="../4.jpg" alt="图片在文件的上一级" /></body></html>发现了一个问题就是：在路径里面\和/好像都可以用。
标签的跳转
a标签的用法：1 跳转 一共四种：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title></head><body><p id="id名">这里是定义的id名处</p>我是夏园园我是夏园园我是夏园园我是夏园园我是夏园园我是夏园园我是夏园园我是夏园园我是夏园园我是夏园园我是夏园园我是夏园园你也可以叫我小圆圆大家都觉得我可爱可是我有很对烦恼<br /><a href="02目标页面.html">我要跳到02目标页面</a><br /><a href="#">这个是调到当前页面哦</a><br /><a href="#id名">当前页面进行定位调到id名处</a><br /><a href="02目标页面.html#id名">这个跳到别的页面里面的id名</a><a href="02目标页面.html" target="_blank">点击跳转到目标页面,新建一个窗口</a><a href="02目标页面.html" target="_self">点击跳转到目标页面,覆盖原来的窗口</a></body></html>base属性：
<head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <base href="_blank" /></head>就是使得所有的页面都是新建窗口
练习题：
给页面加条线：
<hr \>用的补全是：html：xt
HTML结构讲解：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title></head><body></body></html>DTD遵循w3c
DTD文档类型定义
doctype:申明位于文档的最前面
HTML 和Xhtml
XHTML相当于html2.0版本
w3c制定了一个规则：
html：结构
css：样式
jS：行为
在实际的操作之中我们用的最多的会是HTML5
但是必须要设置doctype，如果不设置就会默认一个怪异模式。
现在开始用html：5 +TAB
其他结构标签
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body></body></html>lang=en代表
1：主要使用语言的类型
2：将来做SEO的时候在权重上起到一定的作用
3：用于特殊设备上的设置
head标签
作用：用于存放：title meta base script link
其中title标签是我们必须设置的
Body标签
作用：页面的主体部分用来存放我们所有的Html标签：p h a b u i s em del ins strong img
Title标签：给页面设置一个标题
设置一个Title中的文本在seo上占有很大的权重
SEO标签的语义化：叫做搜索引擎优化
网站在搜索页面上的排名靠前
点击量 访问量 流量
搜索引擎的优化：
花钱买排名
将页面作为静态页面
发外链
页面友好化规范 在合适的地方使用合适的标签 就是合理的使用标签的语义化
网络爬虫： 就是搜索引擎 就是访问页面给页面进行排序，从而在用户搜索的时候可以有一个先后的排名。
meta标签：上面所以的内容都不会显示
常用的用法：
1：Descripation可以描述页面，可以用来使用百度程序（网络爬虫）来收录关键信息，以此来提高页面的排名
2：keywords:关键词，可以用来提高页面的关键词比重
3：字符集：设置字符的编码格式
电脑不能直接存储文本 只能存储编码文件的编码是什么文件保存的就是什么
GB2312 是国标2312是国际标准
UTF-8和GBK之间的区别：
相同点：都是字符的编码格式（字库）
区别：UTF-8收录全世界所有语言的文字
GB2313收录了汉字 片假名 以及英文字母
<head> <meta name="description" content="描述行语言"> <meta name="keywords" content="描述词"> <meta charset="UTF-8"> <title>Document</title></head>列表：
列表在HTML里面主要有三种：
无序列表：没有顺序的数据 ul一般配合li标签
ul中只能放li标签不能放其他的标签
但是li标签可以放其他的标签
<li><a href="01.html"></a>香蕉</li>
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <ul> <li>香蕉</li> <li>苹果</li> <li>西瓜</li> <li>榴莲</li> <li>芒果</li> <li>橘子</li> </ul></body></html>有序列表：一般情况下无序用的比较多 有序用的比较少 ol里面还是只能放li标签
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <ol> <li>香蕉</li> <li>苹果</li> <li>西瓜</li> <li>榴莲</li> <li>芒果</li> <li>橘子</li> </ol></body></html>自定义列表：显示一段数据 但是格式自己定义
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <dl> <dt>有机蔬菜</dt> <dd>白菜</dd> <dd>青菜</dd> <dd>大白菜</dd> <dd>小白菜</dd> <dt>无机蔬菜</dt> <dd>中白菜</dd> </dl></body>练习题：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <ol> <li> <h3>名著1</h3> <p>这个是名著1的秒速</p> </li> <li><h3>名著2</h3> <p>这个是名著2的秒速</p> </li> <li><h3>名著3</h3> <p>这个是名著3的秒速</p> </li> </ol></body></html>列表的嵌套：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head> <body> <ul> <li>吃的</li> <ul> <li>饼干</li> <li>巧克力</li> <ul> <li>德芙</li> <li>费列罗</li> </ul> <li>薯片</li> <li>面包</li> </ul> <li>玩的</li> <li>用的</li> </ul> </body></html>**
表格：
**
表格：table
行：tr
列：td
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <table> <tr> <td>排名</td> <td>名称</td> <td>涨幅</td> </tr> <tr> <td>1</td> <td>中国石油</td> <td>100</td> </tr> <tr> <td>2</td> <td>深圳</td> <td>30</td> </tr> <tr> <td>3</td> <td>长达</td> <td>20</td> </tr> </table></body></html>给表格加边框：
<table border="1">
<table border="1" width="300" height="200" cellspacing="5" cellpadding="5">cellspacing是表格间隔
cellpadding是设置内容和边距之间的距离
th表头：默认会把表格中的数据加粗居中
caption：是给表格设置表题
tbody用来存放页面的主体内容如果不加会自动加进去
thead：用来存放表格的表头
tfoot：用来做一个总结可以放在thead下面 但是算是一行要放一个tr
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <table border="1" width="300" height="200" cellspacing="5" cellpadding="5"> <tbody> <caption><h2>这是一个表格啊</h2></caption> <thead> <tr> <th>排名</th>> <th>名称</th> <th>涨幅</th> </tr> </thead> <tfoot> <tr> <td></td> <td>统计</td> <td>结果</td> </tr> </tfoot> <tr> <td>1</td> <td>中国石油</td> <td>100</td> </tr> <tr> <td>2</td> <td>深圳</td> <td>30</td> </tr> <tr> <td>3</td> <td>长达</td> <td>20</td> </tr></tbody> </table></body></html><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><table border="1" width="300" height="200" cellspacing="5" cellpadding="5"> <tbody> <caption><h2>这是一个表格啊</h2></caption> <thead> <tr> <th>排名</th>> <th>名称</th> <th>涨幅</th> </tr> </thead> <tfoot> <tr> <td></td> <td>统计</td> <td>结果</td> </tr> </tfoot> <tr> <td>1</td> <td>中国石油</td> <td>100</td> </tr> <tr> <td>2</td> <td>深圳</td> <td>30</td> </tr> <tr> <td>3</td> <td>长达</td> <td>20</td> </tr></tbody></table></body></html>表单元素：
用来搜集信息的
输入框：input标签
默认值设置用value
type属性
hidde是放置用户看不到的数据
radio在设置的时候要设置一个name属性相当于id 一刷新两个都没选中 设置一下默认加一个checked属性
radio是单选
checkbox是多选
多选框设置默认和单选一样用checked
button按钮
四种种按钮：reset 有默认值 是重置
但是要配合form使用 form是表单的意思
image是设置图片按钮
submit是提交
select和option一起使用
给下拉框设置默认属性 用selected
textarea：多行输入
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <form action=""> 用户名：<input type="text" value="张飞"><br> 密码：<input type="password"><br> <hr> <input type="hidden" value="很隐秘的数据"> <hr> 性别：<input type="radio" name="sex" checked="checked">男 <input type="radio" name="sex">女 <br> 爱好：<input type="checkbox" name="aihao" checked="checked">打游戏 <input type="checkbox" name="aihao">逛街<input type="checkbox" name="aihao">美食<br> 出生日期：<select > <option >1990</option> <option selected="selected">1991</option> <option >1992</option> </select>年 <select></select>月 <select ></select>日<br> 自我评价：<textarea cols="30" rows="10"></textarea><br> <input type="button" value="提交"> <input type="reset"> <br> <input type="image" src="img/5.png"><br> <input type="submit"> </form></body></html>html空格合并现象
html中的对空格缩进不敏感，不管将来在页面的统一位置写多少空格缩进 换行 浏览器解析的时候只会解析一个空格，如果需要多个空格就要用到转义符。比如空格 加一个这个相当一一个汉字的空格，要多个空格就加多个 ，普通凡的空格相当于半个汉字的间隔
html中的特殊字符
1标签之间的关系：
双标签
单标签
嵌套
并列
将来写代码要分清关系 
注意写特殊字符的时候后面加个；比如<
没有语义的标签
span和div
1span标签一行可以放多个
2宽和高由内容决定
div：
1单独占一行
2默认占一整行 将来我们在进行页面布局的时候用div用的最多就是div+css布局
w3c三层分离的标准：
html ：从语义的角度描述页面页面的结构
css：从样式上修饰页面
js：负责让页面的动起来
- HTML学习02
- HTML学习笔记02
- 前端学习-HTML-02
- 02-Html学习
- HTML学习笔记02(HTML 标签)
- HTML学习02－HTML元素/HTML属性
- 【HTML】HTML学习笔记
- 学习html
- Html学习
- html 学习
- HTML学习
- HTML学习
- HTML学习
- Html学习
- html学习
- HTML学习
- html学习
- 学习Html
- jquery 判断元素是否含有这个class，如果没有，进行操作
- C/C++作业2
- Istio及Bookinfo示例程序安装试用笔记
- 一个保存bmp的c代码
- 唯快不破：redis源码剖析05-ziplist字符串压缩链表
- 02-Html学习
- CFileStatus使用
- 0.设计模式介绍
- Ubuntu安装和配置JDK
- 编写输出1~100之间的素数，要求每行显示5个数
- ubuntu
- spring jdbc 使用多个数据源
- zipimport.ZipimportError的解决方法
- 字符串循环左移
