一:HTML基础
(1)定义:HTML是一种创建网页的标记语言
PS:
(1)本质是一种浏览器可识别的规则 浏览器按照我们的标记呈现出不同的渲染效果
(2)文件后缀名 .html/htm
(2)HTML不是编程语言 其属于标记语言 用来创建网页
(3)HTML文档结构
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> </body> </html>
<head></head>:其一般不是给用户看的 主要定义一些配置 给浏览器看的
<body></body>:其将标记语言呈现给用户看
PS:
(1)上述title:表示网页的标题
(2)charset:表示网页编码
(3)标题内容可以更改 自己更改为什么 显示出来的结果即为什么
(4)HTML打开的方式
(1)可以找到HTML标记语言所在的路径通过浏览器打开
(2)可以再编辑器中通过快捷方式直接打开
(5)HTML注释:
<!---单行注释--->
<!----
注释 1
注释 2
----->
二:HTML常用标签
(1)标签的分类:
(1)按照标签的个数分类
(1)单标签(自闭和标签) </mag>
(2)双标签:<a></a> <p></p>
(2)按照标签所占据的页面面积
(1)块标签:独占浏览器一行<div></div> ,<span></span> ,<p></p>
PS:
(1)块标签可以修改长度
(2)除了P标签之外的块标签之内可以再次嵌套块标签
(3)块标签虽然不能嵌套块标签 但是可以嵌套行标签
(2)行标签:自身文本有多少就占据多少单元格<b>加粗</b>,<u>下划线</u>,<i>斜体</i>,<s>删除</s>
(2)常用的标签
(1)head内常用标签
(1)link:调用外部css样式
(2)style:用来控制样式的 支持写CSS代码
(3)title:窗口标题
(4)script:连接外部js代码 支持写css代码
(5)meta:
(1)http-equiv:主要向浏览器传输一些值 其中包含content参数 主要内容就是各个参数的变量
(2)name:主要描述name与content之间的关系 content可以通过name在搜索引擎中进行信息查找和分类
例如:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>SR</title> <!----定义css 给h1以及s定义颜色----> <style type="text/css">h1{color: antiquewhite} s{color: brown}</style> <!----调用css ----> <link rel="stylesheet" href="my_css.css"> <script type="text/css" src="my_jss.js"></script> <meta http-equiv="content-Type" charset=UTF8"> <!--2秒后跳转到对应的网址,注意引号(了解)--> <meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com"> <!--告诉IE以最高级模式渲染文档(了解)--> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="keywords" content="meta总结,html meta,meta属性,meta跳转"> <meta name="description" content="老男孩教育Python学院"> </head> <body> </body> </html>
(2)body内常用的标签
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>SR</title> </head> <body> <h1>最大的标题标签</h1> <s>删除标签</s> <i>斜体标签</i> <u>下划线标签</u> <b>加粗标签</b> <br> 换行标签 <hr>水平线标签 </body> </html>
(1)符号标签
例如:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--加空格---> <p>迟迟钟鼓初长夜 耿耿星河 欲曙天</p> <p>a > b 用符号表示大于></p> <p>a < b 用符号表示小于<</p> <p>我希望赚很多钱¥100000000000000000000000;</p> <p>符号©</p> <p>符号®</p> </body> </html>
(2)img标签:
作用:网页中上传图片
<!--<img src="图片存放路径" alt="图片不能正常加载时候进行提示" title="鼠标在图片上会有提示信息" width="宽度" height="高度">--> <!--例如---> <img src="photo.jpg" height="217" title="图片信息提示" alt="错误信息提示">
PS:
(1)src来源方式可为图片存放路径
(2)可为url地址
(3)可为二进制
(3)a标签
(1)作用:一个网页可以指向另外一个网页
例如
<a href="www.baidu.com" target="_blank">点击跳转</a>
PS:
(1)href后面跟目标网址
(2)如果该链接没有被点击过那么中间的信息默认为蓝色 点击之后默认为紫色
(3)其默认每次都会在当前窗口进行跳转
(4)如果将target后面更改为_blank则打开新的窗口进行跳转
(2)锚点功能:通过点击可以跳转到指定位置
例如;
<a href="#miao">去找喵星人</a> <a name="miao"></a>
PS:标签三要素
(1)id:定义标签的唯一id 在一个html中应该唯一
(2)class:为html定义一个或者多个类
(3)style:规定元素内的样式
三:列表/表格标签
(1)列表标签
(1)无序列表
例如:
<ul type="disc"> <li>列表1</li> <li>列表2</li> <li>列表3</li> </ul>
type属性:
- disc(实心圆点,默认值)
- circle(空心圆圈)
- square(实心方块)
- none(无样式)
有序列表:
例如:
<ol type="1" start="2"> <li>列表2</li> <li>列表3</li> <li>列表4</li> </ol>
type属性:
- 1 数字列表,默认值
- A 大写字母
- a 小写字母
- Ⅰ大写罗马
- ⅰ小写罗马
start:表示列表其实位置为多少
(2)表格标签:
例如:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<table> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>爱好</th> </tr> </thead> <tbody> <tr> <td>SR</td> <td>18</td> <td>music</td> </tr> </tbody> <tbody> <tr> <td>河马</td> <td>78</td> <td>sleep</td> </tr> </tbody> </table>
PS:
(1)thead:表头
(2)tbody:表身
(3)tr:表示一行
(4)th/td表示文本
(5)建议threa中使用th可以加粗
属性:
- border: 表格边框.
- cellpadding: 内边距
- cellspacing: 外边距.
- width: 像素 百分比.(最好通过css来设置长宽)
- rowspan: 单元格竖跨多少行
- colspan: 单元格横跨多少列(即合并单元格)
四:form表单
作用:接收用户的输入(输入 选择 上传)并将其发生给后端
例如:
<form action=""></form>
PS:action
(1)action表示提交数据的目的地址
(1)如果不写默认提交到当前窗口所在的路径
(2)也可以写全路径(https://www.baidu.com/)
(3)路径后缀写index