前端-Html
目录
html总结
初识html
-
html是什么
- 超文本标记语言（Hypertext Markup Language, HTML）是一种用于创建网页的标记语言。
- 本质上是浏览器可识别的规则，我们按照规则写网页，浏览器根据规则渲染我们的网页。对于不同的浏览器，对同一个标签可能会有不同的解释。（兼容性问题）
- 网页文件的扩展名：.html或.htm
- HTML使用标签来描述网页。不像python编程语言一样，html标记语言是没有逻辑的
-
当我们输入网址所经历的过程
- 浏览器发请求 --> HTTP协议 --> 服务端接收请求 --> 服务端返回响应 --> 服务端把HTML文件内容发给浏览器 --> 浏览器逐行获取并渲染页面
-
当我们在pycharm或其他ide中创建第一个html文件时，系统自动生成html代码，如下
<!DOCTYPE html> #声明这是一个html文件，声明不是HTM标签；它是指示web浏览器关于页面使用哪个 HTML 版本进行编写的指令 <html lang="en"> #设置html语言为英语，可以该为中文lang='ah-CN' <head> #这是一个head标签，后面存放的是网站的名字以及网站的系统配置或者css样式等 <meta charset="UTF-8"> #设置编码方式为utf-8 <title>Title</title> #设置网站名字，其中Title就是你想命名的网站标题 </head> <body> #<body>标签后面写的是网页中呈现的内容 </body> </html>
html常用标签
head标签
- < head >标签中所包含的标签
| 标签 | 意义 |
|---|---|
| < title >< / title > | 定义网页标题 |
| < style >< /style > | 定义内部样式 |
| < script >< /script > | 定义JS代码或引入外部JS文件 |
| < link > | 引入外部样式表文件 |
| < meta > | 定义网页原信息 |
meta标签
-
meta标签位于文档的头部，不包含任何内容，主要针对搜索引擎和更新频度的描述和关键词等，其中的的信息是用户不可见的
-
meta标签属性
- http-equiv属性：当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
<!--2秒后跳转到对应的网址，注意引号--> <meta http-equiv="refresh" content="2;URL=http://www.baidu.com"> #如果把URL和后面的内容去掉，就是2秒钟刷新一次 <!--指定文档的编码类型--> <meta http-equiv="content-Type" charset=UTF8">- name属性: 主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转"> #关键字，也就是别人是可以通过这些关键字搜索到我的这个文章的，搜索引擎就是能够这个content内容来帮别人搜索到你的这个文档的 <meta name="description" content="xxxxxpythonxxx学习"> #是对这个文档的描述，在百度一些内容的页面上，f12可以打开看看
内敛标签和块级标签
-
内敛标签
- 不单独占一行
- 内敛标签中只能嵌套内敛标签，不能嵌套块级标签
-
块级标签
- 单独占一行
- 块级标签中可以嵌套内敛标签以及部分块级标签(< p >标签不可以)
#部分内敛标签 <span>不换行且没有其他效果</span> <b>加粗</b> <i>斜体</i> <u>下划线</u> <s>删除线</s> <button>按钮框</button> <img > #图片标签 <a>百度</a> #链接标签 #部分会计标签 <div>占一行但没其他效果</div> <p>占一行而且有行间距</p> <hr> #用横线占一行 <br> #只是换行 <ul>有无序列表</ul> <ol>有序列表</ol> <dl>标题列表</dl>内容 html语言 空格 & nbsp; > & gt; < & lt; & & amp; ￥ & yen; 版本标识 & copy;
img标签
-
img标签是用于在网页中插图片以及图片信息等，也称为图片标签
<body> <img src="1.JPG"alt="这是一张图片，请稍等..."title="美女" width="200"height="279"> </body> -
img标签属性
src:src后面的值为图片的网络绝对路径或者本地的相对路径 alt:alt后面的值为图片搜索不到是显示在页面中的文字 title:title后面的值为鼠标放在图片上显示的文字信息 width:表示图片的宽度，单位为px(像素),默认不写px height:表示图片的高度，单位为px(像素),默认不写px
a标签
-
a标签用于显示一个链接按钮，所以也称为超链接标签
<body> <a href="https://www.baidu.com"target="_blank">百度</a> </body> -
a标签属性
href：后接链接的网站 target：表示打开链接网站的方式。_blank表示另开一个网址显示，_self表示覆盖当前网站
列表标签
- 列表标签包括有序列表标签ol，无序列表标签ul以及标题列表标签dl
ol标签
-
ol标签里面是有序列表
<ol type="1"start="2"> <li>红烧牛肉</li> <li>老坛酸菜</li> </ol> -
ol标签属性
type：后面的值为a,1,A,Ⅰ,ⅰ等，接下来会按asc表的顺序进行排列 atart：表示第一个数从这个数开始
ul标签
-
ul标签里面是无序列表
<ul type="circle"> <li>红烧牛肉</li> <li>老坛酸菜</li> </ul> -
ul标签属性
type：后面的值可以为none,square,circle,disc(实心圆，方块，空心圆，实心圆)
dl标签
-
dl标签里面为标题列表
<dl> <dt>菜单一</dt> <dd>红烧牛肉</dd> <dd>老坛酸菜</dd> </dl>
table标签
-
表格是一个二维数据空间，一个表格由若干行组成，一个行又有若干单元格组成，单元格里可以包含文字、列表、图案、表单、数字符号、预置文本和其它的表格等内容
-
表格最重要的目的是显示表格类数据。表格类数据是指最适合组织为表格格式（即按行和列组织）的数据
<table border="1" cellpadding="10" cellspacing="1"> <thead> #<thead>表的表头</thead> <tr> <th>菜品编号</th> <th>菜品</th> <th>价格</th> <th>库存</th> </tr> </thead> <tbody> #<tbody>表的内容</tbody> <tr> <td>1</td> <td>红烧牛肉</td> <td>15</td> <td rowspan="2">有货</td> </tr> <tr> <td>2</td> <td>老坛酸菜</td> <td>10</td> </tr> </tbody> </table> -
table标签的属性
border：表框的线宽 cellpadding：表中数据与内框的距离 cellspacing：内框与外框的距离 width: 像素 百分比.（最好通过css来设置长宽） rowspan: 单元格竖跨多少行 colspan: 单元格横跨多少列（即合并单元格）
form标签
- from标签是几个标签中很重要的标签，用于获取用户输入内容，向服务器传输数据，从而实现用户与Web服务器的交互
- 其中form标签多与input系列标签、select下拉选择框标签、 label标签和textarea标签连用
<form action="http://192.168.10.1:9001"method='post'>
内容
</form>
-
form标签属性
属性 描述 accept-charset 规定在被提交表单中使用的字符集（默认：页面字符集） action 规定向何处提交表单的地址（URL）（提交页面）。 autocomplete 规定浏览器应该自动完成表单（默认：开启） enctype 规定被提交数据的编码（默认：url-encoded） method 规定在提交表单时所用的 HTTP 方法（默认：GET） name 规定识别表单的名称（对于 DOM 使用：document.forms.name） novalidate 规定浏览器不验证表单 target 规定 action 属性中地址的目标（默认：_self）
input标签
-
input标签属性
type:具体的显示方式，如文本框，单选等 name:表单提交时的键 value:表单提交时键对应的值 当type='button','reset','submit'时，value为按钮上显示的文本内容 当type='text','password','hidden'时，value为输入框的初始值 当type='radio','checkbox','file'时，value为相关选择的值 checked:主要针对type='radio','checkbox'，选择默认选择的项 readonly:将text与password设置为只读，但可以向服务器传输数据 disabled:针对所有的input，设置为不可写，同时灰框，不可向服务器传输数据 -
type属性的值
属性值 描述 实例 text 设置单行文本框 账号< input type='text' > password 设置密码输入框(不显示明文) 密码< input type='password' > radio 单选 < input type='radio' name='sex' value='1'>男 checkbox 多选 < input type='radio' name='hobby' value='a'>抽烟 date 日期选择框 < input type='date'> submit 提交数据按钮 < input type='submit' value='提交'> button 普通按钮 < input type='submit' value='普通按钮'> reset 重置按钮 < input type='submit' value='重置'> hidden 隐藏输入框 < input type='hidden'> file 文件选择框 < input type='file'> <form action="127.0.0.1:9001"> 账号<input type="text" name="username"> 密码<input type="password"name="password"> <br><br> <input type="radio" name="sex" value="1" checked>男 <input type="radio" name="sex" value="2">女 <input type="checkbox" name="hobby" value="1" checked>抽烟 <input type="checkbox" name="hobby" value="2" checked>喝酒 <input type="checkbox" name="hobby" value="3">烫头 <br><br> <input type="date"> <input type="file"> <input type="hidden"> <br><br> <input type="button" value="普通按钮"> <input type="submit" value="提交"> <input type="reset" value="重置"> </form>
select标签
-
select标签为下拉选择框，可以单选也可以多选(按住ctrl可以多选)
<form action="127.0.0.1:9001"> <p> <select name="city" multiple> <option value='1' selected>北京</option> <option value='2'>上海</option> <option value='3'>广州</option> </select> </p> </form> -
select属性
name:提交时的键 multiply:设置后可多选 disabled:禁用 selected:表示默认选中该项 value：定义提交的值
label标签
-
label标签为 input 元素定义标注（标记）。如果不用这个label给input标签一个标记，input会变黄，但是不影响使用
-
使用了label标签时，当我们点击label标签的文字时会让标识书签获得光标
#第一种方式 <label for="username">账号</label> #for表示指向哪个标签 <input id="username" type="text" name="username"> #id与for对应 #第二种方式 <label> 账号<input type="text" name="username"> </label>
textarea标签
-
textarea标签为多行文本标签,多用于评论框
<textarea name="评论" id="评论" cols="30" rows="10"> </textarea> -
textarea属性
name：名称 rows：行数，相当于文本框的高度 cols：列数，相当于文本框的宽度 disabled：禁用
