前端 -- HTML
Posted wenxin1120
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端 -- HTML相关的知识，希望对你有一定的参考价值。
一. html介绍:
- HTML是什么?
- 超文本标记语言(Hypertext Markup Language),是一种用于创建网页的标记语言,不是编程语言
- 本质上是浏览器可识别的规则,我们按照规则写网页,浏览器根据规则渲染我们的网页.对于不同的浏览器,对同一个标签可能会有不同的解释. (兼容性问题)
- 网页文件的扩展名: .html 或 .htm
- HTML 文档结构
<!DOCTYPE html> <html lang="zh-CN"> #这个lang表示语言，zh-CN是中文的意思，就是说，你整个文档的内容以中文为主，如果以英文为主，就写成lang=‘en‘ <head> <meta charset="UTF-8"> # 编码 <title>css样式优先级</title> </head> <body> 正文内容 </body> </html>
- web服务器本质
import socket sk = socket.socket() sk.bind((‘127.0.0.1‘,8008)) sk.listen() while True: conn,addr = sk.accept() data = conn.recv(1024) conn.send(b"HTTP/1.1 200 OK\\r\\n\\r\\n") conn.send(b‘<h1>hello word</h1>‘) conn.close()
浏览器发请求 --> HTTP协议 --> 服务端接收请求 --> 服务端返回响应 --> 服务端把HTML文件内容发给浏览器 --> 浏览器渲染页面
二. HTML标签介绍
- 标签的格式: 严格封闭的
- HTML标签是由尖括号包围的关键字，如<html>, <div>等
- HTML标签通常是成对出现的，比如：<div>和</div>，第一个标签是开始，第二个标签是结束。结束标签会有斜线。
- 也有一部分标签是单独呈现的，比如：<br/>、<hr/>、<img src="1.jpg" />等。
- 标签里面可以有若干属性，也可以不带属性。
- 标签的语法
- <标签名 属性1=“属性值1” 属性2=“属性值2”……> 内容部分 </标签名>
- <标签名 属性1=“属性值1” 属性2=“属性值2”…… />
- 标签的分类:
- 内敛标签(行内标签) : 不独占一行 (b / i / u / s / img / a / span / button 等),内敛标签只能嵌套内敛标签
- 块级标签(行外标签) : 自己独占一行 (h1- h6 / br / hr / p / div 等),可以嵌套内敛标签和某些块级标签
- p标签 : 不能嵌套p标签,也不能嵌套块级标签
三. HTML常用标签
- head标签中的标签:
- <title> </title> : 定义网页标题
- <style> </style> : 定义内部样式表
- <script> </script> : 定义JS代码或引入外部JS文件
- <link/> : 引入外部样式表文件
- <meta/> : 定义网页原信息
- meta标签共有两个属性,分别是http_equiv属性和name属性,不同的属性又有不同的参数值,这些不同的参数值就实现了不同的网页功能
- http_equiv属性: 相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
<meta http-equiv="refresh" content="2;URL=https://www.baidu.com"> # 两秒后跳转到相应的网址,如果把URL和后面的内容删掉,就是两秒中刷新一次 <meta http-equiv="content-Type" charset="UTF8"> # 指定编码的类型
- name属性: 主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
- 红框就是描述的信息
- body标签中的基本标签 (块级标签和内联标签)
<b>加粗</b> <i>斜体</i> <u>下划线</u> <s>删除</s> <p> 段落标签 # 独占一个段落 </p> <button>一个按钮</button> <h1>标题1</h1> <h2>标题2</h2> <h3>标题3</h3> <h4>标题4</h4> <h5>标题5</h5> <h6>标题6</h6> # 从上到下,字体依次变小 <!--换行--> <br> <!--水平线 / 分割线--> <hr>
- div标签和span标签(常用)
- 这两个标签是没有特别的样式的。<div>xxxx</div>，但是这是两个标签最大的特点，可以通过CSS来控制，就像咱们画画一样，在一个白纸上画好，还是在一个报纸上画好啊，对不对。打开个网页通过f12看一下，就发现多数都是div和span。
- div标签用来定义一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。
- span标签用来定义内联(行内)元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。
- 块级元素与行内元素的区别：所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。这两个元素是专门为定义CSS样式而生的。
- img标签
- 图片标签
- 属性:
- src = ‘图片路径‘ # 网络地址的绝对路径或者本地的相对路径
- alt = ‘图片未加载成功时的提示‘
- title = ‘鼠标悬浮时提示信息‘
- width = ‘设置图片的宽‘
- height = ‘设置图片的高‘
-
# 示例: <img src="1.jpg" alt="这是个美女,请稍等.." title="美女" width="200" height="200">
- a标签
- 超链接标签
- 属性:
- href : 超链接的地址
- target : 是否新建窗口
- target = ‘_self‘ 当前窗口打开某个路径对应的html页面
- target = ‘_bland‘ 新建窗口打开某个路劲对应的html页面
-
<a href="https://www.baidu.com" target="_blank"> <button>点击进入百度</button> </a>
- 列表标签
- 无序列表
- type属性:
- disc : 实心圆点(默认值)
- circle : 空心圆圈
- square : 实心方块
- none : 无样式
-
<ul type = ‘disc‘> <li>太白</li> <li>alex</li> <li>wusir</li> </ul>
- type属性:
- 有序列表
- start属性 : 是从数字几开始
- type属性:
- 1 : 数字列表.默认值
- A : 大写字母
- a : 小写字母
- I : 大写罗马
- i : 小写罗马
-
<ol type="A" start="2"> <li>太白</li> <li>alex</li> <li>wusir</li> </ol> # 表示按照大写字母进行排序,从B开始
- 标题列表标签
- 就像大纲一样,有一个层级效果
-
<dl> <dt>标题1</dt> <dd>内容1</dd> <dt>标题2</dt> <dd>内容1</dd> <dd>内容2</dd> </dl>
- 无序列表
- 表格标签
- 属性:
- border : 表格边框 (边框高度)
- cellpadding : 内边距 (内边框和内容距离)
- cellspacing : 外边距 (内外边框的距离)
- width : 像数 百分比 (最好通过css来设置长宽)
- rowspan : 单元格竖跨多少行 (写在td里面)
- colspan : 单元格横跨多少列(即合并单元) (写在td里面)
-
<table border="5" cellpadding="5" cellspacing="2"> <thead> # 表格的标题(头) <tr> # 一行 <th>姓名</th> # 一个单元格的内容 <th>年龄</th> <th>爱好</th> </tr> </thead> <tbody> # 表格的正文内容 <tr> <td>alex</td> <td>83</td> <td>抽烟</td> </tr> <tr> <td>wusir</td> <td>74</td> <td>喝酒</td> </tr> </tbody> </table>
- 属性:
- input标签
-
表现形式 对应代码 text 单行输入文本 <input type = ‘text‘ />password 密码输入框(不显示明文) <input type = ‘password‘ />date 日期输入框 <input type = ‘date‘ />checkbox 复选框 <input type = ‘checkbox‘ name = ‘x‘ />radio 单选框 <input type = ‘radio‘ name = ‘x‘ />submit 提交按钮 <input type = ‘submit‘ value = ‘提交‘ />reset 重置按钮 <input type = ‘reset‘ value = ‘重置‘ />button 普通按钮 <input type = ‘button‘ value = ‘普通按钮‘ />hidden 隐藏输入框 <input type = ‘hidden‘ />file 文本选择框 <input type = ‘file‘ /> - type属性 : 控制输入框的样式
- name属性 : 分组,携带数据key 传给后台的是: key:value
- value : 表单提交时对应项的值
- type="button", "reset", "submit"时，为按钮上显示的文本内容
- type="text","password","hidden"时，为输入框的初始值
- type="checkbox", "radio", "file"，为输入相关联的值
- readonly : 只读,针对的是输入框 如:text,password
- disabled : 不允许操作,所有的input都可以设置
- 设置了readonly的标签,它的数据可以被提交到后台,设置了disabled的数据,是不能提交到后台的
- submit : 发送浏览器上输入标签中的内容,配合form表单使用,页面会刷新
- reset : 页面不会刷新,将所有内容清空
-
- form表单
-
<form action="http://127.0.0.1:8008"> # action: 指定数据提交的路径 用户名:<input type="text" name = ‘username‘> 密码:<input type="password" name = ‘password‘> <br> <input type="radio" name = ‘sex‘ value="1">男 # 传给后台的数据是 : sex:1 <input type="radio" name = ‘sex‘ value="2">女 <br> <input type="checkbox" name = ‘hobby‘ value="a">喝酒 # 传给后台的数据是: hobby:a <input type="checkbox" name = ‘hobby‘ value="b">抽烟 <input type="checkbox" name = ‘hobby‘ value="c">烫头 <input type="submit" value = ‘提交按钮‘> <br> <input type="date"> <input type="button" value = ‘提交按钮‘> <input type="reset" value = ‘重置‘> <input type="hidden"> <input type="file"> </form>
- 注意:form表单触发提交数据的操作,必须写在form表单标签里面,写在外面就是普通按钮
- <input type=‘submit‘>
- <button>提交按钮</button>
- checked默认选中
- 默认选中了 : 抽烟,喝酒
-
- select标签下拉选择框
-
# 单选 <select name="city"> <option value="1">北京</option> <option value="2" selected=‘selected‘>上海</option> # 默认选中上海 <option value="3">深圳</option> </select> # 多选:multiple <select name="city" multiple> <option value="1">北京</option> <option value="2" selected>上海</option> # # 默认选中上海 <option value="3">深圳</option> </select>
- multiple：布尔属性，设置后为多选下拉框，否则默认单选
- disabled：禁用
- selected：默认选中该项
- value：定义提交时的选项值
-
- label标签
- 标识标签的功能
-
方式一: for:执行对哪个标签进行标识 效果: 点击label标签中的文字.就能让标识的标签获得光标 <label for="username">用户名</label> <input id="username" type="text" name="username" value="alex"> 方式二: <label> 密码:<input type="password" name="password" value="111" disabled> </label>
- 说明:
- label 元素不会向用户呈现任何特殊效果,但是点击label标签里面的文本,那么和他关联的input标签就获得了光标,让你输入内容
- label标签的for属性值应当与相关元素的id属性值相同
- textarea多行文本
-
<textarea name="memo" id="memo" cols="30" rows="10"> 默认内容 </textarea> name：名称 rows：行数 #相当于文本框高度设置 cols：列数 #相当于文本框长度设置 disabled：禁用
-
以上是关于前端 -- HTML的主要内容，如果未能解决你的问题，请参考以下文章