补充总结html所有内容，html学习完这篇基本就差不多了

最新推荐文章于 2024-07-07 07:22:25 发布

寒凡.

最新推荐文章于 2024-07-07 07:22:25 发布

阅读量453

点赞数

分类专栏： HTML 文章标签： html 学习前端

本文链接：https://blog.csdn.net/weixin_52184815/article/details/125619467

版权

网页的组成：图片文本视频音频超链接等组成(用户角度)

标签

开发者：

html标签：网页的内容，结构 --> 内容层

css样式：美化装饰装修网页 --> 表现层

javascript(js): 网页和用户的交互行为动态效果，前后端数据交互 --> 行为层

可以放入图片文本视频音频超链接等

网页文件：后缀名/拓展名是html的文件

运行环境：浏览器

浏览器：360 qq 百度 uc 2345 浏览器，谷歌浏览器，火狐，欧朋
1.渲染引擎(内核)：
解析并且渲染html，css部分代码。
2.js引擎
解析js部分。
html标签：超文本标记语言 --> 语义化

双标签: <标签名>内容</标签名>

单标签: <标签名>

标签属性:<标签名属性名=“属性值”></标签名>
<标签名属性名=“属性值”>

seo: 1.元信息: 关键字，关键信息，seo优化；
2. lang=“en” --> seo优化
–> 告诉浏览器是什么语言类型的网页

基本结构：

<!doctype html> --> 文档类型声明

如果不写，浏览器按照自己的内核来解析 --> 怪异模式；
如果写了文档类型声明，不管什么内核的浏览器都会按照 w3c的标准解析

兼容性: ie6 7 8浏览器，他对一些标签或者是html5的一些新特性，不支持，我们要采取一些兼容性的写法
去写老版本浏览器支持的代码。

< html lang=“en”>
< head> --> 头部标签
< meta charset=“Utf-8”> --> 字符集编辑器用什么编码方式保存，浏览器就用什么编码方式解析
< title>< /title> --> 网页的标题标签
< /head>
< body>< /body> --> 内容标签
</ html> --> 根标签

标签嵌套：1.父子关系包含关系
2.兄弟关系并列关系

常用标签：

网页的标题

标题标签：< hn>< /hn> n:1-6 他会对标签里面的文本加大加粗的显示，数字越大字体越小
align=“” left center right 左中右
在编辑器里对内容格式进行操作，不会影响页面的格式

段落标签: < p>< /p>
align=“” left center right 左中右
换行标签：< br> 要在哪换行就在那加
图片标签:< img src=“图片路径”> align=“” left right
a.网络图片路径：一定是带有网络协议的图片路径
b.本地图片路径:图片名.后缀名

本地路径:a.绝对路径
b.相对路径
width=“数字”，设置图片的宽
height=“数字”，设置图片的高
如果只设置其中一个，那么另一个会等比例缩放
title=“文本” 图片的标题
alt=“文本” 图片加载失败时，显示的文本

超链接:< a>内容< /a>
href=“要跳转的页面网址”
href=““会刷新自身一次
href=”#”
href=“javascript:;” 不会跳转页面也不会刷新
href=“文件名.html” 进行本地的页面之间的跳转
target=“_blank” 打开新窗口进行跳转
锚点链接 href=“#id名” 在页面内进行跳转，在页面内进行定位，在要跳转的标签加上id属性 id=“id名”
id名:数字字母下划线，但是不能以数字开头
水平分割线：< hr>

表格标签: < table>< table>
< tr>< /tr> --> 行
< td>< /td> --> 单元格
在不设置宽的情况下，表格宽度由内容决定，内容会把表格撑大
路径：1.绝对路径
从这个文件所在的最大的盘符开始找，一层一层的往下找直到找到
网页部署到服务器之后，服务器也是一台电脑，如果部署到服务器的盘符和绝对路径的盘符不一致，那么就
找不到图片。一般很少使用
2.相对路径
指的就是引用文件和被引用文件之间的相对位置关系
a.搞清楚引用关系 --> 哪个文件引用哪个 --> 网页文件引用其他文件
b. …/ 上一级， ./ 同一级， /根目录，下一级

表格标签: < table>< /table>
width=“数字”，设置表格整体的宽
height=“数字”，设置表格的高度
align=“left center right”, 表格位置
background=“图片路径”, 设置表格背景图片
bgcolor=“表示颜色的单词，#0000, rgb(0-255,0-255,0-255)”
< tr>< /tr> --> 行标签
background=“图片路径”, 设置表格背景图片
bgcolor=“表示颜色的单词，#0000, rgb(0-255,0-255,0-255)”
align=“left center right”
< th>< /th> --> 表头标签，他会对里面的文本居中字体加粗
< capiton> --> 表格的标题对里面的文本居中展示 --> 相对于表格来说
< td>< /td>
background=“图片路径”, 设置表格背景图片
bgcolor=“表示颜色的单词，#0000, rgb(0-255,0-255,0-255)”
align=“left center right”

单元格合并：
1.跨列合并：
a.找到起始单元格 --> 从左到右最左边的那个
b.colspan=“合并几个就写几”
c.合并完成之后删除多余单元格
2.跨行合并：
a.找到起始单元格 --> 从上到下最上边那个
b.rowspan=“合并几个写几个”
c.合并完成之后删除多余单元格

文本格式化标签：< p>段落标签< /p>
< b>粗体标签< /b>
< em>em标签< /em>
< i>i标签< /i>
< small>small标签< /small>
< strong>strong标签< /strong>
< p>我是一个_{下标字< /sub>< /p>
< p>我是一个< sup>上标字< /sup>< /p>
< ins>ins标签< /ins>
< del>del标签< /del>}

特殊字符: & nbsp; 空格
& lt; 小于
& gt; 大于

字体标签: < font>文本< /font> 注: font标签在html5 已经没有用了;工作尽量不使用
color=“颜色” --> 修改字体的颜色
face=“字体” --> 修改字体样式

列表：1.无序列表< ul>< /ul> type=“square circle disc”
列表项： < li><标签>文本</标签>< /li>

2.有序列表< ol></ ol> type=“1 a A i I” 数字小写英文字母大写英文字母小写罗马字母大写罗马字母

start=“” 有序列表列表项初始排序序号

列表项： < li>< /li> value=“” 设置当前列表项的排序序号

表单： 1.表单域表单域里放表单控件
< form action=“”>< /form>
表单域标签不能不写，不写就无法提交表单控件的信息

2.表单控件
a.文本框< input type=“text” name=“” value=“”>
数字类型文本框< input type=“number” name=“” value=“”>
b.密码框< input type=“password” name=“” value=“”>
c.单选框< input type=“radio” name=“” value=“”>
一组单选框，需要有相同的name属性。
checked属性，是否默认选中
d.多选框< input type=“checkbox” name=“” value=“”>
一组多选框，需要有相同的name属性。
checked属性，是否默认选中

3.提交按钮:< input type=“submit” value=“”>
点击提交按钮就会把表单域中的信息提交到指定的文件
提交按钮的value属性是显示在按钮中的文本，并不会把value的值提交

4.下拉选择框< select name=“”>< /select>
< option value=“”>选项< option>

5.文本域< textarea name=“”>值< /textarea>
文本域不需要value属

6.重置按钮< input type=“reset” value=“”>
重置整个表单的value

7.文件选择框
< ipnut type=“fiel” name=“”>
选择文件进行提交

8.图片提交按钮
< input type=“image” src=“”>

9.< label>
< ipnut type=“radio” name=“”>男
< /label>
< label for=“sex”>男< /label>
< input type=“radio” id=“sex” name=“sex”>

< div></ div>和< span></ span>
语义化：对应的页面效果使用对应的标签
容器思维：< div></ div> < span></ span> 没有语义，
标签：我们代码里的一个标签对应页面上的一个元素；

元素分为3类：

a.块级元素：独占一行，可以直接设置宽高；

b.行内块元素：同时具有两种元素的特点；不独占一行，可以直接设置宽高；

c.行内元素：不独占一行，不能直接设置宽高；

< div></ div>是块级元素，里面就可以放块级元素，行内元素，行内块元素；

< span>< /span>是行内元素，可以放行内元素，文档流:

1.标准流:块级元素从上到下，行内元素从左到右，

h5新特性: 1.新增语义化标签
< nav style=“width:500px;height:500px;background-color:red”>导航栏</ nav>
< div style=“width:500px;height:500px;background-color:red”>导航栏</ div>
< aside style=“width:500px;height:500px;background-color:red”>侧边栏</ aside>

网页独立内容块
< article style=“width:200px;height:200px;background-color:pink”>内容</ article>
</ section>
< footer style=“width:500px;height:500px;background-color:red”>网页底部内容< /footer>
好处:seo优化，优化网页结构使网页结构更加清晰
2.新增多媒体标签
a.视频标签
< video>< /video>
muted 是否静音播放
controls 播放控件
height=“200” width=“1000” 宽高
loop 播放完成之后是否循环播放
poster 视频封面
preload 页面加载完成之后是否预加载视频 auto预加载 metadate只加载元信息 none不预加载
b.音频标签
< audio></ audio>
muted 是否静音播放
controls 播放控件
height=“200” width=“1000” 宽高
loop 播放完成之后是否循环播放
poster 视频封面
preload 页面加载完成之后是否预加载视频 auto预加载 metadate只加载元信息 none不预加载
3.增强型表单控件
< input type=“email” name=“email” > 邮箱输入框
< input type=“number” name=“number” min=“” max=“”> 数字输入框 min最小值 max最大值
请选择日期< input type=“date” name=“date”>< br> 日期输入框
请选择月份< input type=“month” name=“month”>< br> 月份输入框
请选择颜色< input type=“color” name=“color”> 颜色输入框
请搜索< input type=“search” name=“search”> 搜索框
required 设置了required属性的表单为必填项在提交表单时会进行表单验证如果未填会阻止表单提交。

大家在做练习的时候首先看效果图写，以下的代码是为了方便大家，写完之后或者有不懂的地方以作参考。

练习小米商城布局：

<!DOCTYPE HTML>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>小米商城</title>
	<style>
	  body{
     
	    background-color:#f5f5f5;
	  }
	  div{
     
	    margin:5px;
	  }
	</style>
  </head>
  <body>
    <div style="width:1300px;margin:30px">
	  <div style="float:left">
	    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ac5cafc68c10ce4471869d378f594b52.png?thumb=1&w=234&h=614&f=webp&q=90" style="height:670px;background-color:white">
	  </div>
	    <div style="width:230px;height:325px;text-align:center;float:left;background-color:white">
	      <img width="160" height="160" alt="Redmi Note 11T Pro+" img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/211bb83776a8e0c8358732c3f3aa2864.png?thumb=1&amp;w=200&amp;h=200&amp;f=webp&amp;q=90">
	      <h3 style="font-size:14px;font-weight:400;color:#444;">Redmi Note 11T Pro+</h3>
	      <p style="font-size:12px;color:#b0b0b0;margin-top:0px;margin-right:10px;margin-bottom:10px;margin-left:10px;">天玑8100｜真旗舰芯</p>
	      <p style="text-align:center;color:#ff6700;"><span>2099</span>元<span>起</span></p>
	    </div>
	    <div style="display:inline-block;width:230px;height:325px;text-align:center;background-color:white;float:left">
	      <img width="160" height="160" alt="Redmi Note 11T Pro+" img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5713971c4bb6512743dfd06023080268.png?thumb=1&w=200&h=200&f=webp&q=90">
	      <h3 style

最低0.47元/天解锁文章

寒凡.

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
1
评论
补充总结html所有内容，html学习完这篇基本就差不多了

网页的组成：图片文本视频音频超链接等组成(用户角度)标签开发者：html标签：网页的内容，结构 --> 内容层css样式：美化装饰装修网页 --> 表现层javascript(js): 网页和用户的交互行为动态效果，前后端数据交互 --> 行为层可以放入图片文本视频音频超链接等网页文件：后缀名/拓展名是html的文件运行环境：浏览器浏览器：360 qq 百度 uc 2345 浏览器，谷歌浏览器，火狐，欧朋。...
复制链接

扫一扫