HTML

HTML介绍

超文本标记语言,是一种用于创建网页的标记语言,不是编程语言

HTML 文档结构

<!DOCTYPE html> 
<html lang="zh-CN">   #这个lang表示语言，如果以英文为主，就写成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'>

内敛标签(行内标签): 不独占一行,内敛标签只能嵌套内敛标签 (b / i / u / s / button / span / img / a 等)
块级标签(行外标签): 自己独占一行,可以嵌套内敛标签和某些块级标签 (h1 - h6 / br / hr / p / div)
- p标签: 不能嵌套p标签,也不能嵌套块级标签

head 标签

标签	意义
`<title> </title>`	定义网页标题
`<style> </style>`	定义内部样式表
`<script> </script>`	定义JS代码或引入外部JS文件
`<link/>`	引入外部样式表文件
`<meta/>`	定义网页原信息

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>

特殊字符

html中默认是不显示空格的，也就是说通过空格键加了空格也没有多少个空格的效果，加多少个都是显示一个空格的效果，需要特殊字符才能显示出空格的效果

内容	对应代码
空格	` `
>	`>`
<	`&lt`
&	`&amp`
￥	`&yen`
版权标识（写公司网站的时候会用到）	`&copy`
注册（一个圆圈里面有个R）	`&reg`

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>李四</li>
    <li>王五</li>
</ul>
```
有序列表
- start属性 : 是从数字几开始
- type属性
  - 1 : 数字列表 ,默认值
  - A : 大写字母
  - a : 小写字母
  - I : 大写罗马
  - i : 小写罗马
```
<ol type="A" start="B">
    <li>张三</li>
    <li>李四</li>
    <li>王五</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>张三</td>
            <td>83</td>
            <td>抽烟</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>74</td>
            <td>喝酒</td>
        </tr>
    </tbody>
</table>

form表单

属性	值	描述
action	URL	规定当提交表单时向何处发送表单数据。设置空，表示当前地址
enctype	见说明	规定在发送表单数据之前如何对其进行编码。
method	get、post	规定用于发送 form-data 的 HTTP 方法。
name	form_name	规定表单的名称。
novalidate	novalidate	如果使用该属性，则提交表单时不进行验证。

说明

enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码。

默认地，表单数据会编码为 "application/x-www-form-urlencoded"。就是说，在发送到服务器之前，所有字符都会进行编码（空格转换为 "+" 加号，特殊符号转换为 ASCII HEX 值）。

application/x-www-form-urlencoded 在发送前编码所有字符（默认）
multipart/form-data 不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。
text/plain 空格转换为 "+" 加号，但不对特殊字符编码。

1. input标签

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的数据,是不能提交到后台的

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' />`

submit : 发送浏览器上输入标签中的内容,配合form表单使用,页面会刷新
reset : 页面不会刷新,将所有内容清空

input提交示例

<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,设置相同name互斥 -->
    <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"> 烫头

2. 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="yhp">

方式二:
<label>
    密码:<input type="password" name="password" value="111" disabled>
</label>

说明:
1. label 元素不会向用户呈现任何特殊效果,但是点击label标签里面的文本,那么和他关联的input标签就获得了光标,让你输入内容
2. label标签的for属性值应当与相关元素的id属性值相同

3. textarea多行文本

<textarea name="memo" id="memo" cols="30" rows="10">
  默认内容
</textarea>
name：名称
rows：行数   #相当于文本框高度设置
cols：列数   #相当于文本框长度设置
disabled：禁用

posted @ 2019-06-10 18:24 陌路麒麟阅读(119) 评论(0) 编辑收藏举报

刷新页面返回顶部

Loading

Yin

路漫漫其修远兮，吾将前后上下左右而求索