一、HTML

最新推荐文章于 2021-01-18 16:51:14 发布

叫我一番

最新推荐文章于 2021-01-18 16:51:14 发布

阅读量291

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/Jones__Wu/article/details/105468506

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML

常用快捷键
一、什么是HTML？
- 超文本标记语言
- 实例：
二、HTML的主体标签
三、HTML的标签
四、分帧frameset
五、表格table
六、表单FORM
七、HTML中HEAD头部设置
八、 HTML5多媒体标签（熟悉）

常用快捷键

tab键：输入完标签内容后会自动补全

ctrl+D：复制上一行代码

ctrl+/：注释

一、什么是HTML？

超文本标记语言

(1) 标签也叫做标记

(2) html是由标签/标记和内容组成的

(3) 标签是由标签名称和属性组成的

实例：

<人肤色=“黄色” 眼镜=“很大”></人>

二、HTML的主体标签

<!DOCTYPE html>  #H5的头   声明文档类型 为html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/TDT/xhtml1-strit.dtd">  #之前的头文件 现在不用
<html>
<head>
	<title>标题内容</title>
  	<meta charset="UTF-8"> #设置字符集
</head>
<body>
  	放html的主体标签
</body>
</html>

html:文件是网页，浏览器加载网页，就可以浏览

head:头部分，网页总体信息

title:网页标题
meta：网页主体信息，会根据name(author/description/keywords)或者httq-equiv(content-type/expires/refresh)属性的不同，而设置网页的不同属性
link:引入外部文件和C#中的using异曲同工
style：写入CSS
script：写入JS

body:身体部分，网页内容

三、HTML的标签

（1）文本标签

在这里插入图片描述

（2）图片标签

实例:

<img src="图片地址" title="文字提示" alt="图片加载失败显示得信息" width="宽" height="高" border="边框" />

属性：

src：图片名及url地址 (必须属性)
alt: 图片加载失败时的提示信息
title：文字提示属性
width：图片宽度
height：图片高度
border：边框线粗细

注意：

如果宽和高只给一个那么为等比缩放如果俩个都给那么会按照你所给的宽和高来显示

（3）路径

1.相对路径

./ 当前
…/ 上一级
…/ …/ 上上一级

2.绝对路径

一个固定得链接地址(如域名)
从根磁盘一直到你的文件得路径
file协议打开本地磁盘文件得协议（试一下火狐）

（4）超链接

1.实例：

<a href="链接地址" title="提示信息" target="打开方式">点击显示得内容</a>

2.属性：

href必须，指的是链接跳转地址

title：文字提示属性（详情）

target:

_blank 新建窗口得形式来打开

_self 本窗口来打开

_parent 父窗口来打开

_top 顶级窗口来打开

framename 分帧名来打开

3.锚点

定义锚点

<a id="锚点名称”></a>  `现在使用id  以前使用得都是 name

使用锚点

<a href="#锚点名"></a>

(5) 列表

1.无序列表

<ul typle="显示类型">
	<li></li>  
</ul>
<!--
属性：
	type 显示得类型
	square 方形显示
	disc 默认圆点
	circle 空心圆
-->

2.有序列表

<ol typle="显示类型" start="起始值">
 	<li></li>
</ol>
<!--
属性 
	type i a A 1 
	start 起始值

-->

3.自定义列表

<dl>
  	<dt>列表头</dt>
  	<dd>列表内容</dd>
</dl>

(6) HTML注释

多行注释：

注释的作用：

代码的调试
解释说明

(7) 常用实体化符号标签

HTML 中有用的字符实体

注释：实体名称对大小写敏感
查找网址：HTML 字符实体
在这里插入图片描述

四、分帧frameset

（1）定义和用法

frameset 元素可定义一个框架集。它被用来组织多个窗口（框架）。每个框架存有独立的文档。在其最简单的应用中，frameset 元素仅仅会规定在框架集中存在多少列或多少行。您必须使用 cols 或 rows 属性。

（2）可选的属性

在这里插入图片描述

（3）实例

<frameset rows="20%,*,20%" frameborder="1/0">
  <frame src="" name="分帧名1">
  <frameset cols="20%,*" frameborder="1/0">
    <frame src="" name="分帧名1">
    <frame src="" name="分帧名2">
  </frameset>
  <frame src="" name="分帧名3">
</frameset>

注意：不可以和body在一起需要将body删掉

五、表格table

（1）属性：

width 宽
height 高
border 边框
cellpadding/cellspacing 内边距/外边距
background 背景图片
bgcolor颜色
align位置 center/left/right
valign规定单元格内容的垂直排列方式。
- top 对内容进行上对齐。
- middle 对内容进行居中对齐（默认值）。
- bottom 对内容进行下对齐。
- baseline 与基线对齐。
rowspan合并行
colspan合并列

（2）标签：

caption 表格标题

*tr 行标签

*th 列头标签

*td 列标签

（3）实例：

<table>
  <caption>我是表格的标题</caption>
  <tr>
    <th>我是表头</th>
    <th>我是表头</th>
    <th>我是表头</th>
  </tr>
  <tr>
    <td>我是单元格</td>
    <td>我是单元格</td>
    <td>我是单元格</td>
  </tr>
</table>

（4）细线表格实例：

<table border="0" cellspacing="1" bgcolor="red"  width="80%">
  <tr bgcolor="#ffffff">
    <td>1.1</td>
    <td>1.2</td>
  </tr>
  <tr bgcolor="#ffffff">
    <td>2.1</td>
    <td>2.2</td>
  </tr>
</table>

六、表单FORM

标签：

<form></form>

（1）form属性

action 提交的地址

method 提交的方式

get

(1) 默认不写为get传参 url地址栏可见

(2) 长度受限制（IE浏览器2k火狐8k）

(3) 相对不安全

post

(1) url地址栏不可见长度默认不受限制

(2) 相对安全

enctype 提交的类型

enctype属性在表单有文件上传的时候需要设置值值为multipart/form-data

（2）input标签

表单项标签input定义输入字段，用户可在其中输入数据。在 HTML 5 中，type 属性有很多新的值。
例如：

<input type="text" name="username">

1、type属性：

text:单行文本框
password:密码输入框
checkbox:多选框注意要提供value值
radio:单选框注意要提供value值
file:文件上传选择框
button:普通按钮
submit:提交按钮
image:图片提交按钮

<input type=“image” width=“100” height=“100”border=“2”src=“上传图片”/>

reset:重置按钮, 还原到开始(第一次打开时)的效果
hidden:表单隐藏域,是要和表单一块提交的信息,但是不需要用户修改

注意：reset重置按钮是将表单数据恢复到第一次打开时的状态，并不是清空

2、name属性：

表单项名,用于存储内容值的

3、value属性：

输入的值(默认指定值)

4、size属性：

输入框的宽度值

5、maxlength属性：

输入框的输入内容的最大长度

6、minlength属性：

输入框的输入内容的最小长度

7、readonly属性：

对输入框只读属性

8、disabled属性：

禁用属性
区别：readonly 数据还是会提交给服务器端 disabled 将数据作废掉不会再传递给服务器端

9、checked属性：

对选择框指定默认选项

10、placeholder属性：

提示信息

11、required属性：

必填属性

12、scr和alt属性：

为图片按钮设置的，image图片按钮，默认具有提交表单功能

（3）select标签

1、select属性

name属性:定义名称,用于存储下拉值的
size：定义菜单中可见项目的数目，html5不支持
disabled 当该属性为 true 时，会禁用该菜单。
multiple 多选

2、内嵌标签option属性

value属性:下拉项的值
selected属性:默认下拉指定项.

（4）textarea 多行的文本输入区域

属性：

- name :定义名称,用于存储文本区域中的值。
*cols ：规定文本区内可见的列数。hlc
*rows ：规定文本区内可见的行数。
disabled：是否禁用
readonly：只读
placeholder 提示信息

注意：
默认值是在两个标签之间

（5）button 标签定义按钮

可以在 button 元素中放置内容，比如文档或图像。这是该元素与由 input 元素创建的按钮的不同之处。
type属性:

submit 默认为submit
button 点击
reset 重置

（6）fieldset html5标签

fieldset 元素可将表单内的相关元素分组。

disabled属性：

定义 fieldset 是否可见。

form属性：

定义该 fieldset 所属的一个或多个表单。

（7）legend html5标签

legend标签为fieldset、figure、details元素定义标题

<form>     
  <fieldset>
    <legend>健康信息：</legend>
    身高：<input type="text" /><br/>
    体重：<input type="text" /><br/>
  </fieldset>
</form>

（8）optgroup html5标签

optgroup标签定义选项组。此元素允许您组合选项

<select>
   <optgroup label="Swedish Cars">
 	<option vanlue="volvo">Volvo</option>
 	<option value="saab">Saab</option>
   </optgroup>
   <optgroup label="German Cars">
 	<option value="mercedes">Mercedes</option>
 	<option value="audi">Audi</option>
   </optgroup>
 </select>

（9）datalist html5标签

datalist标签定义可选数据的列表。与 input 元素配合使用，就可以制作出输入值的下拉列表。

<form action="demo_form.php" method="get">
  <input list="browsers" name="browser">
  <datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
  </datalist>
  <input type="submit">
</form>

（10）input标签搭配label标签使用

可以使标签内的区域指向label标签for属性指代的对象的事件

<body>
<form action="">
    <p>
        <input type="radio" name="sex" value="1" id="man">男
        <br>
        <br>
        <br>
        <br>
        <label for="man">怪蜀黍</label>
        <br><input type="radio" name="sex" value="0">女
    </p>
</form>
</body>

（11）作为了解的input h5的新属性

type属性：

time 时间
date 日期
range 区间
email 邮箱
url url地址
color 颜色
number 数值
search 搜索

七、HTML中HEAD头部设置

（1）设置网页编码

<meta charset="utf-8"/>

（2）自动刷新

<meta http-equiv="refresh" content="时间;url=网址" />

（3）关键字：

<meta name="Keywords" content="关键字" />

（4）描述：

<meta name="Description" content="简介、描述" />

（5）站点作者:

<meta name="author" content="root,root@xxxx.com">

告诉搜索引擎你的站点的制作的作者；

（6）网页标题：

<title>本网页标题</title>

（7）导入CSS文件：

<link type="text/css" rel="stylesheet" href="**.css"/>

（8）CSS代码：

<style type="text/css">嵌入css样式代码</style>

（9）JS文件或代码：

<script >。。。</script>

（10）设置网页小图标:

<link rel="icon" href="/favicon.ico" type="image/x-icon" />

注意：

头标签中的内容不会显示在浏览器中

八、 HTML5多媒体标签（熟悉）

（1）audio 音频

在这里插入图片描述

方式一

<audio src="./images/beidahuang.mp3" controls="controls">
		你的浏览器不支持播放
</audio>

方式二

你的浏览器不支持播放

（2）video 视频

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200414212145786.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZ

方式一

<video src="res/happy.mp4" controls poster="res/glnz.jpeg" width="200" height="300" loop>
    您的浏览器不支持播放 请更换浏览器在此播放
</video>

方式二

<video  controls loop poster="tiao.jpg">
	<source src="movie.webm" type="video/webm">
	<source src="movie.ogg" type="video/ogg">
	<source src="movie.mp4" type="video/mp4">
	您的破浏览器该扔了，不支持视频标签
</video>