Html学习

最新推荐文章于 2024-07-05 20:20:47 发布

100In2023

最新推荐文章于 2024-07-05 20:20:47 发布

阅读量398

点赞数

文章标签： html

本文链接：https://blog.csdn.net/qq_40738478/article/details/114580047

版权

%% 个人学习整理，仅供参考

Html骨架

Html基本结构

DTD+html+head+body

<!DOCTYPE html>
<html>
    <head>
        网页的配置
    </head>
    <body>
        网页的正式内容
    </body>
</html>

DTD

DTD：(Document Type Definition) 文档类型定义

HTML5 DTD

标明HTML文档遵循怎样的协议

<!DOCTYPE html>

head标签下常用的设置

meta部分

charset 字符集设置
- UTF-8(通用字符集，一个汉字占3个字节)
- GB2312(中文字符集，GBK，一个汉字占2个字节)

<meta charset="utf-8" />

SEO：(Search Engine Optimization, 搜索引擎优化)

网页关键词和网页描述

<meta name="Keywords" content="页面的关键词1,页面的关键词2, 页面的关键词3" />
<meta name="Description" content="页面描述" />

title设置

设置网页标题

显示位置：浏览器标题栏

<title>im a title</title>

作用：搜索引擎收录网站时，显示的标题。可以吸引用户的点击量，合理的设置title是有必要的

body标签下常用内容

标题标签(headline) h1,…,h6

标签类型：行级标签

<h1>
    h1标签
</h1>
<h2>
    h2标签
</h2>
<h3>
    h3标签
</h3>

搜索引擎很看重

标签的内容，一般放置logo等重点内容

一般只能有一个，过多，所有的h1标签将都会被搜索引擎忽略

段落标签(paragraph)

标签类型：行级标签

页面显示效果不换行

<p>
    段落标签
</p>

不可嵌套 h系列标签和其他p标签

可以辅助换行

div标签(Division)(分割)

标签类型：块级标签

“DIV+CSS” 布局

常见的类名

区域	类名
页头	header
LOGO	logo
导航栏	nav
横幅	banner
内容区域	content
页脚	footer

HTML5特性

空白折叠现象
- 文字与文字之间的多个空格、换行会被折叠成一个空格
- 标签和文字之间的空格会被忽略
转义字符

转义字符	意义
&lt	小于号
&gt	大于号
&nbsp	空格(不会被折叠)
&copy	版权符号

<p>
    段落标签&tl;p>&tl;/p>是行级标签
</p>

HMTL注释

<!-- im HTML -->

给代码添加注释，方便日后阅读代码或他人阅读代码提供提示

附加总结一

HTML是什么?
HTML骨架是什么?
DTD是什么?
标签和段落标签、DIV标签要如何使用？
网页字符集有什么区别？
SEO配置项，遵守规则？
HTTP(网页浏览工作流程)？如何被用户看见？

列表

标签	语义
<ul></ul>	无序列表
<ol></ol>	有序列表
<dl></dl>	定义列表

无序列表

基本样式

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

Type属性(已弃用，仅了解)，用于定义前导符号样式，推荐使用CSS实现

值描述
disc 默认值，实心圆
circle 空心圆
square 实心方块

值	描述
disc	默认值，实心圆
circle	空心圆
square	实心方块

有序列表

<ol>
    <li></li>
    <li></li>
    <li></li>
</ol>

注意点

li不能散着放
ol或ul的子标签只能是li
li里面可以放任何标签

列表的嵌套

<!-- 无序列表嵌套无序列表&&有序列表 -->
<ul>
    <li>
        <ul>
            <li></li>
            <li></li>
        </ul>
    </li>
    <li>
        <ol>
            <li></li>
            <li></li>
        </ol>
    </li>
    <li></li>
</ul>
<!-- 有序列表嵌套有序列表&&无序列表 -->
<ol>
    <li>
        <ol>
            <li></li>
            <li></li>
        </ol>
    </li>
    <li>
        <ul>
            <li></li>
            <li></li>
        </ul>
    </li>
    <li></li>
</ol>

多媒体与语义化标签

图片标签

<img src="<图片路径>" alt="<图像文本描述>" />

img - image

src - source

alt - alternate

Tip：

图片文件必须复制到项目文件夹中
图片事引入到网页中的，非插入

alt属性作用

图像无法加载时，使用alt属性中的图片描述
供视力不方便的用户使用网页朗读器，会朗读alt中的图片描述

图片的width height属性

图片宽度和高度单位为像素(px)，但是不需要写单位
省略其中一个数值的设定，另一值则按比例缩放图片

网页图片常用格式

格式	说明	类型
.bmp	Win画图软件默认保存格式	位图
.gif	支持动画(表情包等)
.jpeg(.jpg)	有损压缩图片，用于照片
.png	便携式网络图像，用于logo、背景图形等，支持透明和半透明
.svg	矢量图	矢量图
.webp	压缩算法，优秀的图片格式

相对路径&&绝对路径

超级链接

是将网页和网页连接到一起的方法，是互联网成"网"的原因。

<a href="链接目标地址" title="悬停文本" target="blank">链接文字</a>

a - anchor 锚

href - hypertext reference 超文本引用

target 目标 + blank 空白 = 在新窗口打开链接网页

HTML4 target="_blank" HTML5 target=“blank” 向前兼容

href支持相对路径&&绝对路径

图片超级链接

<a href="链接URL地址" target="blank">
    <img src="图片路径地址" alt="图片描述" />
</a>

页面内锚点

目标标签添加id

<a herf="URL#id">链接标签部件</>

特殊锚点：(个人方便记忆，非标准分类)

锚点	作用
<文件名>.exe,<文件名>.zip等文件格式的链接	自动成为下载链接
#top	返回顶部
mailto:<邮件链接>	发邮件
tel:<手机号码>	打电话

音频和视频

音频

<audio src="<音频位置>" controls autoplay loop>浏览器版本过低，请升级浏览器</audio>

src - source 来源

controls 显示音频控件(W3School：规定浏览器应该为音频提供播放控件。)

autoplay 自动播放

loop 循环播放

audio && source

<audio controls>
    <source src="ueou.mp3" type="audio/mpeg" />
    <source src="ueou.rgg" type="audio/ogg" />
    <source src="ueou.wav" type="audio/wav" />
    抱歉，您的浏览器不支持audio标签，请升级浏览器
</audio>

常用音频格式

名称	介绍	支持的浏览器
mp3	一种音频压缩技术，被设计用来大幅度的降低音频数据量	chrome,firefox,safari
ogg	一种新的音频压缩技术，完全免费、开放、没有专利限制的	chrome,firefox
wav	微软公司开发的一种声音文件格式，声音文件质量和CD相仿	chrome,firefox

视频

<video src="<视频地址>" controls autoplay loop></video>

src - source 来源

controls 显示视频控件(W3School：属性供添加播放、暂停和音量控件。)

autoplay 自动播放

loop 循环播放

可以设置宽度与高度，设置实现方式类似于图片

video && source

<video controls>
    <source src="ueou.mp4" type="video/mp4" />
    <source src="ueou.webm" type="video/webm" />
    <source src="ueou.ogv" type="video/ogv" />
    <source src="ueou.avi" type="video/avi" />
    抱歉，您的浏览器不支持video标签，请升级你的浏览器
</video>

常用视频格式

名称	说明
mp4	mpeg4文件采用H264视频编解码器和AAC音频编解码器
webm	webm文件采用VP8视频编解码器和Vorbis音频编解码器
avi	avi支持256色和RLE压缩，一种有损压缩方法
ogv	为HTML5中的一个名为ogg theora的视频格式

HTML5区块标签

区块标签名	说明
<section>	文档的区域，语义比div大
<article>	文档的核心文章内容，会被搜索引擎主要抓取
<aside>	文档的非必要相关内容,广告等
<nav>	导航条
<header>	页头
<main>	网页核心部分
<footer>	页脚

语义化标签

语义化标签名	效果	说明
<span></span>	p标签 span块1span块2	文本的区块化标签，本身无显示效果，结合CSS提供样式
<b>、<u>、<i>	加粗下划线倾斜	加粗、下划线、倾斜文字,用于强调文本，被CSS替代，可局部使用
<strong>、<em>、<mark>	重要文字强调文字高亮文字	特别重要的文字、强调文字、一段需要被高亮的文字。强调语义
<figure></figure> <figcaption></figcaption>	Figure部分内容 Figcaption部分对Figure部分说明描述	figure代表独立的内容，figcaption与figure配合使用,为独立引用单元

讨论语义化

如何理解语义化?(<个人初学见解>(参考网站理解))

将页面结构标签语义化，使页面结构清晰化(结构清晰)
为页面构建提供较为清晰的引导
使写源码的人思路清晰化，使读源码的人理解清晰化(提高可读性，有利于维护)
(对搜索引擎友好，有利于搜索引擎的抓取)
(容易让一些特殊设备识别，有利于特殊终端的阅读)

附加总结二

img常见属性及使用方式，网页引入图片存放位置
a标签常用属性及使用方法
网页插入音频与视频方法，常用属性及使用方法
常见大纲标签和语义化标签
相对路径与绝对路径
理解语义化

表单标签

表单创建

用途：用来收集信息，如注册、登录、发送评论反馈、购买商品等等

(个人理解，需要提交整体信息的时候便可以使用表单)

标签<form></form>

<form action="<请求提交的目标地址>" method="<请求方式>"</form>

action 指向提交的后台目的地址

method 声明表单信息的提交方式 POST & GET(以后添加)

POST 请求，隐式请求，提交信息明文显示在网址后
GET 请求，显式请求，请求信息明文显示在网址后

基本控件

Input系列

input系列，标签形成的组件样式由type属性决定

单行文本框(type = “text”)[单标签]

<input type="text" value="<文本框内容>" placeholder = "<文本框提示文字>" disabled required />

type 定义input类型

value 设定文本框默认文字

placeholder 设置文本框提示文字，文字默认为浅色文字显示，并非文本框的值

disabled 禁止用户与元素交互 “锁死”

required 用户必须填写 H5新增属性

单选按钮(type=“radio”)

<input type="radio" value="<选项提交值>" name="互斥组名" checked />

type 定义input类型

value 设置选项向服务器提交的值

name 同一组单选按钮需要设置相同的name实现选择互斥

checked 默认选中同一组单选按钮只能有一个按钮设置cheked

复选框(type=“checkbox”)

<input type="checkbox" name="<组名>" value="<提交值>" >

密码框(type=“password”)

<input type="password" value="<文本框内容>" placeholder = "<文本框提示文字>"

input的各种按钮

type属性	按钮类型
button	普通按钮，简写为<button></<button>
submit	提交按钮
reset	重置按钮

input常规类型汇总

type属性	控件名称
text	单行文本框
radio	单选按钮
checkbox	复选按钮
password	密码框
button	普通按钮
submit	提交按钮
reset	重置按钮

H5中新增Input系列控件(向前兼容到IE9)

type属性	控件名	特性or注意点
color	颜色选择器	支持由系统提供，因系统而变化
date、time	日期、时间选择控件	选择填充
email	电子邮件输入控件	置于<form>标签下&submit(提交时)，有校验格式功能
file	文件选择控件
number	数字输入控件	min="<最小数>",max="<最大数>"
range	拖拽条	min="<最小值>",max="<最大值>"
search	搜索框	与text相比，多了一键取消文本框内容功能；无法实现搜索功能，需后台实现
url	网址输入控件	置于<form>标签下&submit(提交时)，有校验格式功能

Label标签

将文字与单选按钮绑定，用户点击文字视为点击了单选按钮(以此类推)

H5绑定方式

<form action="" method="请求方式">
    <h3>
        水果二选一
    </h3>
    <label>
        <input type="radio" name="fruit">苹果
    </label>
    <label>
        <input type="radio" name="fruit">梨子
    </label>
</form>

H4绑定方式，Label标签通过for属性和单选按钮的id进行绑定

<form action="" method="请求方式">
    <h3>
        水果二选一
    </h3>
    <input type="radio" name="fruit" id="apple">
    <label for="apple">苹果</label>
    <input type="radio" name="fruit">
    <label for="pear">梨子</label>
</form>

下拉菜单

select & option

<!--- 下拉菜单 --->
<select>
    <!--- 内部选项标签 --->
    <option value="aliyun">阿里云</option>
    <option value="tecentyun">腾讯云</option>
    <option value="huaweiyun">华为云</option>
</select>

多行文本框

<textarea rows="<行数，无单位>" cols="<列数，无单位>"></textarea>

textarea 文本区域文本框

标签源码不可换行，会出现空格，致使placeholder属性失效

H5新增特性标签

datalist(输入框内容备选控件)

<input type="text" list="about-list">
<!--- datalist控件 --->
<datalist id="about-list">
    <!--- 备选选项 --->
    <option value="备选1">
    <option value="备选2">
    <option value="备选3"> 
        ......
</datalist>

id 用于绑定控件

输入框内容检测，智能显示与之相同的备选选项

附加总结三

表单创建常用标签
radio&checkbox使用注意点
熟记表单元素type值

表格标签

基本标签

<!--- 表格创建标签table，border属性定义表格边框样式 --->
<table border="1">
    <caption>表格标题</caption>
    <!--- 表格行 --->
    <tr>
        <!--- 表格小标题 ，替代td，属于 表格列--->
        <th></th>
        <!--- 表格列 --->
        <td></td>
    </tr>
</table>

常用操作属性及特性(单元格的并合)

rowspan="" 行并合
colspan="" 列并合
语义化标签
thead 表头
tbody 表格主体
tfoot 表格尾

<!--- 创建表格 border为1，默认样式为双线边框--->
    <table border="1" width="400px">
        <!--- 语义化，表头部分 -->
        <thead>
            <tr>
                <th></th>
                <th>A</th>
                <th>B</th>
                <th>C</th>
                <th>D</th>
            </tr>
        </thead>
        <!--- 表格主体 -->
        <tbody>
            <tr>
                <th>1</th>
                <!--- rowspan 行并合，colspan列并合 -->
                <td rowspan="2" colspan="2">A1</td>
                <td>C1</td>
                <td rowspan="2">D1</td>
            </tr>
            <tr>
                <th>2</th>
                <td>C2</td>
            </tr>
            <tr>
                <th>3</th>
                <td>A3</td>
                <td>B3</td>
                <td colspan="2">C3</td>
            </tr>
        </tbody>
        <!--- 表格尾 -->
        <tfoot>
            <tr>
                <th colspan="2">总计</th>
                <td colspan="3">foot</td>
            </tr>
        </tfoot>
    </table>

不常用标签(了解)

cellpadding 表格内容和边框之间的空间，已CSS代替

cellspacing 定义两个单元格之间的空间大小，已CSS代替

%% 完结
CSS学习

100In2023

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Html学习

Html学习## 个人学习整理，仅供参看Html骨架Html基本结构head标签下常用的设置meta部分charset 字符集设置网页关键词和网页描述<meta name="Keywords" content="页面的关键词1,页面的关键词2, 页面的关键词3" /><meta name="Description" content="页面描述" />SEO：(Search Engine Optimization, 搜索引擎优化)title设置
复制链接

扫一扫