前端 -- HTML

程序员文章站 2022-10-08 21:58:33

一. HTML介绍: HTML是什么? 超文本标记语言(Hypertext Markup Language),是一种用于创建网页的标记语言,不是编程语言本质上是浏览器可识别的规则,我们按照规则写网页,浏览器根据规则渲染我们的网页.对于不同的浏览器,对同一个标签可能会有不同的解释. (兼容性问题) ......

一. 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>
```
- <!doctype html> 声明为html5文档
- <html> </html> 是文档的开始标记和结束标记. 是html页面的根元素,在它们之间的文档的头部(head) 和主体(body)
- <head> </head> 定义了html文档的开头部分,它们之间的内容不会在浏览器的文档窗口显示. 包含了文档的元 (meta) 数据,配置信息等,是给浏览器看的,我们看到是在body标签里面写的内容
- 注意: 对于中文网页需要使用<meta charset = 'utf-8'>声明编码,否则会出现乱码. 有些浏览器会设置gbk编码,则需要设置为<meta charset = 'gbk'>

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>
```
有序列表
- 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标签

type属性	表现形式	对应代码
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默认选中
- <input type="radio" name="sex" value="2" checked>女 #简写方式,当属性名和属性值相同时可简写默认选中 : 女
- <input type="checkbox" name="hobby" value="a">喝酒
- <input type="checkbox" name="hobby" value="b" checked="checked">抽烟
- <input type="checkbox" name="hobby" value="c" checked="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：禁用

上一篇： HTML5深入学习之 WebSQL 数据库

下一篇：栈Stack

前端 -- HTML

PHP simple_html_dom.php+正则采集文章代码

PHP定时自动生成静态HTML的实现代码

html元素的分类以及特点

自学WEB前端能不能找到一份前端开发工作

前端设计模式——单例模式和工厂模式

AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法

前端面试题（三）

前端面试(算法篇) - 数组乱序

前端分页功能的实现以及原理（jQuery）

Web前端基础学习-1

前端 -- HTML

PHP simple_html_dom.php+正则 采集文章代码

PHP定时自动生成静态HTML的实现代码

html元素的分类以及特点

自学WEB前端能不能找到一份前端开发工作

前端设计模式——单例模式和工厂模式

AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法

前端面试题（三）

前端面试(算法篇) - 数组乱序

前端分页功能的实现以及原理（jQuery）

Web前端基础学习-1

PHP simple_html_dom.php+正则采集文章代码