html

最新推荐文章于 2024-07-10 16:57:46 发布

weixin_46025916

最新推荐文章于 2024-07-10 16:57:46 发布

阅读量147

点赞数 2

文章标签： html5 html

本文链接：https://blog.csdn.net/weixin_46025916/article/details/107267012

版权

文章目录

一、HTML初识

一、HTML初识

1. 简介

HTML（Hyper Text Markup Language ）:超文本标签语言,
作用：主要是通过HTML标签对网页中的文本、图片、声音等内容进行描述
注意：体会、文本（strong）、标签(只有一种，<>)、语言(html特有的语法)、几个词语
例：<strong>我是加粗的字体</strong>

2. HTML骨架格式

<html>
    <head>
        <title></title>
    </head>
    <body>
    </body>
</html>

2.1 猪八戒骨架记忆法

在这里插入图片描述

html标签	head标签	title标签	body标签
根标签	头标签	标题标签	主体标签（用于存放所有的HTML标签，所有内容写于body标签中间）

2.2 用sublime快速生成html骨架

输入html:5→再按tab键
输入！→再按tab键

3. HTML标签分类

标签作用：HTML文档和元素是通过HTML标签进行标记的

3.1 单标签

简介：也称空标签，是指用一个标签符号即可完整描述整个功能的标签
比如：<br />

3.2 双标签

样式：<标签名>内容</标签名>，"/"为关闭符号
组成部分：开始标签（start/opening tag）和结束标签(end/closing tag)
开始标签：“<标签名>”被括号包围的元素名
结束标签：“</标签名>”被括号包围的斜杠和元素名
比如：<bdoy>我是文字</body>

4. 标签关系

<html>
    <head>
        <title></title>
    </head>
    <body>
    </body>
</html>

4.1 包含关系（父子关系）

<head> <title></title> </head>
<html></html>是所有标签的父亲
子比父缩进一个“tab”位

4.2 并列关系（兄弟关系）

<head></head>
<body></body>
并列关系“上下对齐”

5. 代码图解析

<!DOCTYPE html>
<html lang= "en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
< body>
再页面中输入  以下2个单词
html: 5     或者!
在sublime.里面然后按下tab键盘即可生成HTML骨架
</body>
</html>

5.1 doctype类型

语义：文档类型的声明标签，不属于HTML标签

<! DOCTYPE html>

作用：加于html骨架前是为了告诉用户和浏览器这是用了html5的版型

5.1.1文档类型设定 document

HTML : sublime中输入html:4s
XHTML : sublime中输入html:xt
HTML5 : sublime中输入html:5

5.2 中英文网

语法格式

<html lang="en"> <!--中文的为lang="zh-CN"-->

作用：告诉浏览器或者搜索引擎这是一个英文网页还是中文网页

5.3 UTF-8字符集

<meta charset="UTF-8">

通用：UTF-8字符集
作用：让浏览器识别出使用了哪一种字符集，防止出现乱码现象

5.3.1 字符设定

HTML,XHTML:<meta http>
HTML5:<meta charset="UTF-8">

6. HTML标签类型

标签语义：指标签的含义，就是这个标签是干什么的

6.1排版标签

6.1.1 标题标签 (熟记，双标签)

语义：head头部，给网页中中的文字弄好各级标题，
写法：<h1><h2><h3><h4><h5>和<h6>；只到h6
语法格式：

<h2>标题文本</h2>

注意：h1标签很重要，一般给logo使用；

6.1.2 段落标签 (熟记，双标签）

语义：paragraph段落，将网页中的文字有条理的分段
语法格式：

<p>文本内容</p>

6.1.3 换行标签（熟记，单)

语义：break换行，打断
语法格式:

<br />

6.1.4 水平线标签(认识，单）

语义：horizontal横线，将水平线置于网页中,使文档结构清晰，层次分明
语法格式：

<hr />

6.1.5 文本格式化标签——加粗、倾斜（双）

语义：突出重要性，比普通文字重要

效果	标签（都是后者语义更强烈，推荐使用）
粗体（记住）	`<b></b>或者<strong></strong>`
斜体（记住）	`<i></i>或者<em></em>`
加删除线	`<s></s>或者<del></del>`
加下划线	`<u></u>或者<ins></ins>`

6.2div span 标签（重点，双）

没有语义：就是盒子，用来装内容，用来布局。div-divsion分割分区，span跨度跨距范围。
语法格式：

<div>这是头部</div>   <span>今日价格</span>

6.3 标签属性

语义：就是给相应的标签添加他们的属性
语法格式：

<标签名 属性1="属性值1" 属性2="属性值2"...>内容</ 标签名>

如
<hr width="400" />
注意：①数量-可多个，位置-开始标签内，标签名后面
②顺序-无顺序，标签名与属性、属性与属性之间以空格隔开
③如无写的属性值，默认属性派上用场

6.4 图像标签（重要，单）

语义：为了在网页中显示图像
语法格式：

<img src="图像URL" />

注意：src是img的必需属性，用于指定图像文件的路径和文件名
标记属性

属性	属性值	描述
src	URL	图像的路径（必须有）
alt	文本	替换文本。图像不能显示时的替代文本
title	文本	提示文本。鼠标悬停时显示的内容
width	像素	设置图像的宽度
height	像素	设置图像的高度
border （做了解，css中设置）	数字	设置图像边框的宽度

6.5 链接

6.5.1 链接标签(双）

语义：创建超链接
语法格式：

<a href="跳转目标" target="目标窗口的弹出方式" >文本或图像</a>

href:必须要加，指定链接目标的URL地址，应用此属性，具有超链接功能
target：指定页面的打开方式，_self为默认值,_blank为新窗口打开方式
注意：
①外部链接：添加网址

<a href="https://www.baidu.com/"> 百度</a>

②内部链接：直接链接内部网页名称即可

<a href="ind3x.html">首页</a>

③空白标签：没有跳转对象

<a href="#">文本</a>

6.5.2 锚点定位(用`<a></a>`）

语义：适用于较长页面，点击关键词，跳转到页面中的相应文本
语法格式：

<a href="#id名">链接文本</a>

比如

<a href="#life">个人生活</a>
<h3 id="life">个人生活</h3>

6.5.3 base标签(单)

语义：设置整体链接的打开状态
语法格式：

<base target="_blank" />

注意：①加在<head></head>中间，即可打开body中的所有链接
②_blank打开新的窗口；_life在原有窗口上打开
③base显示blank，想可自己在某条链接上加_life

6.6 特殊字符

常用字符
空格符		` `
小于号	<	`<`
大于号	>	`>`

注释标签（多使用）
语义：给程序员看，浏览器是不执行的
语法格式：
注意：①html中单句CTRL+/可以来回切换
②多句ctrl+shift+/

8.路径-针对图片（重点，难点）

8.1 相对路径(一般用于内部图片链接)

文件	级别	路径表达	语法格式
图像文件和HTML文件	位于同一文件夹	输入图像文件的名称	如`<img src="log.gif" />`
同上↑	图位于html下一级文件夹	文件和文件夹名之间用"/"隔开	如`<img src="img/log.gif" />`(高几级就用几个/)
同上↑	图位于html上一级文件夹	在文件名之前加入"…/"	`<img src="../../log.gif" />`

8.2 绝对路径（一般用于外部图片）

步骤

在网页图片上右键→复制图片地址
再<img src="图片地址" />

9. 列表（用来布局）

9.1 无序列表(重点)

语义:各列表项之间没有顺序之分,是并列的
语法格式

<ul>
	<li>列表项1</li>
	<li>列表项2</li>
	<li>列表项3</li>
	......
</ul>

注意：
①<ul></ul>中只能放<li></li>，不能放其他的标签
②<li></li>中可以容纳其他的元素

9.2 有序列表(了解)

语义：各列表之间有顺序
语法格式：

<ol>
	<li>第一名</li>
	<li>第二名</li>
	<li>第三名</li>
	......
</ol>

9.3 自定义列表（重点）

语义：对术语或者名词进行解释
语法格式

<dl>
	<dt>名词1</dt>
	<dd>名词1解释1</dd>
	<dd>名词1解释2</dd>
	...
	<dt>名词2</dt>
	<dd>名词2解释</dd>
	<dd>名词2解释2</dd>
	...
</dl>

如

<dl>
	<dt>江西</dt>
	<dd>南昌</dd>
	<dd>上饶</dd>
	<dd>九江</dd>
	<dd>宜春</dd>
	<dd>赣州</dd>
</dl>

10. 表格table（会使用）

10.1 创建表格

语义：不是用来布局，常见处理表格式数据(先写一个表格结构，再写表格属性)
语法格式：

<table>   <!--表格标签 是一个四方格-->
	<tr>  <!--行标签-->
		<td>单元格内的文字</td>  <!--单元格标签-->
		...
	</tr>
	...
</table>

姓名	性别	年龄
蔡徐坤	男	22
王俊凯	男	21

注意：①``标签中只能放``标签 ②``标签中可以容纳任何元素

10.2 表格属性

属性名	含义	常用属性值
border	表格的边框	像素值(默认border=“0”)
cellspacing	单元格与单元格之间的空白边距	像素值（默认2像素）
cellpadding	单元格内容与单元格边框之间的空白间距	像素值（默认1像素）
width	表格的宽度	像素值
height	表格的高度	像素值
align	表格在网页中的水平对齐方式	left/center/right

注意
①各表格属性添加在标签中
如

<table border="2" cellspacing="4" cellpadding="2" width="200" height="200" align="center"> 
	<tr>
		<td>姓名</td>
		<td>性别</td>
		<td>年龄</td>
	</tr>
	<tr>
		<td>蔡徐坤</td>
		<td>男</td>
		<td>22</td>
	</tr>
	<tr>
		<td>王俊凯</td>
		<td>男</td>
		<td>21</td>
	</tr>
</table>

10.3 表格标签类型

10.3.1 表格标题标签

语义：给表格加上标题，在<table>下加
语法格式：

<caption></caption>

10.3.2 表头标签

语义：表头即第一行文字加粗居中。
语法格式:

<th></th>

使用方法：就是把第一行的<td></td>换成<th></th>。

10.3.3 表格结构（了解）

语义：将表格分为头部和主体部分;分别用<thead></thead>和<tbody></tbody>包裹起来
语法格式：

<thead></thead>和<tbody></tbody>

如

<table>
<thead>   <!--不会显示出来-->
	<tr>
		<td>姓名</td>
		<td>性别</td>
		<td>年龄</td>
	</tr>
</thead>
<tbody>  <!--不会显示出来-->
	<tr>
		<td>蔡徐坤</td>
		<td>男</td>
		<td>22</td>
	</tr>
	<tr>
		<td>王俊凯</td>
		<td>男</td>
		<td>21</td>
	</tr>
</tbody>
</table>

10.4 合并单元格（标签属性，难点）

合并：
①跨行合并：rowspan；
②跨列合并：colspan
使用方法：
①写在标签中属于标签属性
②横向-跨列合并；纵向-跨行合并
③比如合并3个横向单元格，写法：<td rowspan="3">单元格内容</td>，另外两个单元格-代码删除掉

10.4 浏览器审查HTML标签元素

方法：
①右键-检查
②按F12键

11. 表单（掌握）

11.1 简介

语义：为了收集用户信息
构成：
①表单域（整个表单的域范围）、
②提示文本（表单上原有的字）、
③表单控件（填入的内容）

11.2 input输入控件(重点，单)

语法格式

<input />

11.2.1 type属性

11.2.1.1 文本框和密码框

语法格式
①文本框

<input type="text" />

如
用户名<input type="text" />
②密码框

<input type="password" />

如
密  码<input type="password" />

11.2.1.2 单选框和复选框

语义:单选框选择一个选项；复选框选择多个选项（都应该有相同的name值）
语法格式：

<input type="radio" />
<!--单选框，如果是一组，我们通过相同的name值来实现，从而控制她单选-->

如
性别 <input type="radio" name="sex" /> 女<input type="radio" name="sex" /> 男<input type="radio" name="sex" /> 人妖<input type="radio" name="sex1" />未知

<input type="checkbox" />
<!--复选框，可以同时选择多个-->

如

爱好：<input type="checkbox" name="hobby" />足球<input type="checkbox" name="hobby" />篮球<input type="checkbox" name="hobby" />乒乓球<input type="checkbox" name="hobby" />排球

11.2.1.3 默认的表单属性选项，用于以上两个属性

语法格式：

checked="checked"
<!--放于input里面-->

11.2.1.4 按钮组

普通按钮

<input type="button" />

提交按钮

<input type="submit" />

重置按钮

<input type="reset" />

图像按钮

<input type="image" src="im.jpg" /><!--图像按钮一定要有路径-->

文件域

<input type="file" />

11.2.1.5新增的input type属性值

属性值	使用实例	含义
url	`<input type="url" />`	输入URL格式
email	`<input type="email" />`	输入邮箱格式
tel	`<input type="tel" />`	输入手机号码格式
number	同↑	输入数字格式，只能是数字
search	同↑	搜索框
range	同↑	区域；自由滑动块
color	同↑	颜色
time	同↑	小时分钟
date	同↑	年月日
month	同↑	月年
week	同↑	星期年

在这里插入图片描述

注意：想要上面的按照样式来，可以在下面设置一个submit提交按钮

11.2.2 (其它)

属性	属性值	描述
name	由用户自定义	控件的名称，譬如给单选框分类，让其单选
value	由用户自定义	控件中文本值
size	正整数	控件的宽度
checked	checked	控件的默认选项
maxlength	正整数	最大字符集

11.2.3 input新增属性

属性	用法	描述
placecholder	`<input type="text" placeholder="请输入用户名" />`	占位符 ,表单控件中的灰色文字,当用户输入的时候里面的文字消失删除所有文字，自动返回
autofocus	`<input type="text" autofoucs>`	当页面加载时，自动获得焦点
multiple	`<input type="file" multiple>`	多文件上传
autocomplete	`<input type="text autocomplete="off">`	规定是否应该启用自动完成。有on和off；0n：自动完成；off：不自动完成，安全保密。注意：首先需要提交按钮；其次表单应该以name给其命名
required	`<input type="text" required>`	必填项
accesskey	`<input type="text" accesskey="s">`	使元素获得焦点的快捷键，采用alt+字母的形式

11.3 lable标签(理解,双)

语义：点击提示文本，浏览器自动将光标跳到相应的表单，提升用户体验
语法格式

<lable></lable>

①单个表单定位
<lable> 输入账户：<input type="text” /> </lable>
②多个表单用for和id，跟锚点定位有相像之处
<lable for="two"> 输入账户：<input type="text" /> <input type="text" id="two" /> </lable>

11.4 textarea控件(文本域，双)

语义：创建多行文本框，方便输入大量信息
语法格式

<textarea>文本内容</textarea>

11.5 select下拉菜单

语法格式

<select>
	<option>选项1</option>
	<option>选项2</option>
	<option>选项3</option>
    ...
</select>

注意
①<select></select>中至少包含一对<option></option>
②当<option selected="selected">时此项为默认选项，跟checked有相像之处

11.6 表单域（双）

语义：收集表单控件信息，并且提交，将整个表单的代码全部包裹，表单域就是form标签
语法格式

<form></form>

属性

属性	属性值	描述
Action	URL地址，信息收集完毕后跳转的后台
method	get或者post	表单的提交方式；get（速度快，会显示表单内容，不适合作为密码提交）；、post刚好相反
name	由用户自定义	指定表单名称，分辨同一页不同表单

12. 常用新标签

12.1 标签查询

w3c手册中文官网

12.2 新增标签（都是双的）

标签	header	footer	article	nav	section	aside
语义（定义啥）	文档的页眉、头部	文档的页脚、底部	文章	导航链接的部分	文档中的节、区域	其所在内容之外的内容侧边

12.2.1 ⑧ datalist标签

语义：定义选项列表，与input元素搭配使用，
语法格式

<input type="text" value="请输入明星" list="star" /> <!--input里面用list-->
<datalist id="star"> <!--datalist里面用id和input连接起来-->
	<option>刘德华</option>
	<option>刘若英</option>
	<option>刘晓庆</option>
	<option>郭富城</option>
	<option>张学友</option>
</datalist>

12.2.2 ⑨fieldset元素

语义: 将表单内相关元素分组打包，与legend搭配使用
语法格式

<fieldset>
	<legend>用户登录</legend>
	用户名：<input type="text" /><br>
	密 码：<input type="password" />
</fieldset>

13. 多媒体标签

13.1embed（会使用，双）

语义: 标签定义嵌入的内容，主要用于网上的音视频
语法格式：

<embed src="网上链接地址"></embed>

13.2 audio播放音频（双）

语法格式

<!--src指定音频路径即可-->
<audio src="url"></audio>

附加属性

属性	使用	描述
autoplay	autoplay	自动播放
controls	controls	显示播放控件
loop	loop=“2”（代表循环播放两次）；loop="-1"(代表无限循环)	循环播放

由于版权原因，不同浏览器可支持播放格式不一样，多浏览器支持方案

<audio controls autoplay>
	<source src="misic.mp3" />
	<source src="music.ogg" />
	您的浏览器不支持播放声音
</audio>

13.3 video播放视频

语法格式

<video controls autoplay>
	<source src="mp4.mp4" />
	<source src="mp4.ogg" />
	您的浏览器不支持视频播放
</video>

属性

属性	使用	描述
autoplay	autoplay	自动播放
controls	controls	显示播放控件
loop	loop=“2”（代表循环播放两次）；loop="-1"(代表无限循环)	循环播放
height		设置播放窗口高度
width		设置播放窗口宽度

weixin_46025916

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html

这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好！这是你第一次使用 Markdown编辑器所展示的欢迎页。如果你想学习如何使用Mar
复制链接

扫一扫