首页 > > 网页制作 > css >

前端 -- HTML

2019-08-14 09:42:07来源：博客园阅读 ()

一. 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：禁用

原文链接:https://www.cnblogs.com/wenxin1120/p/11109661.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：element-ui文件上传做类型大小的限制

下一篇：elementUI 2个输入框时间区间月份选择

IDC资讯：主机资讯注册资讯托管资讯 vps资讯网站建设

网站运营：建站经验策划盈利搜索优化网站推广免费资源

网站联盟：联盟新闻联盟介绍联盟点评网赚技巧

行业资讯：搜索引擎网络游戏电子商务广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器安全防护

软件技巧：其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识：网络协议网络安全网络管理组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条

最新资讯

热门关注

热门标签