Html总结

qq_45426187

已于 2023-07-07 10:13:06 修改

阅读量34

点赞数

文章标签： html 前端 java

于 2023-07-06 14:11:05 首次发布

本文链接：https://blog.csdn.net/qq_45426187/article/details/131575383

版权

1.HTML：
超文本标记语言

2.超文本：
视频音频代码超链接图片

3.6大基本标签
标题<head> 段落<p> 换行<br/> 水平线<hr/> 加粗<strong> <b> 倾斜 <em> <i>

4.5大特殊字符
大于 >
小于 <
引号 "
空格  
版权符号 ©

5.图片常用5大属性
src 图片引用路径相对路径
alt 图片损坏或者路径不对显示提示文字
title 鼠标悬浮显示提示文字
width 图片宽度
height 图片高度

6.单标记闭合标签：
br hr img input

7.三种超链接:
页面间超链接
文字超链接
图片超链接
锚链接：
跳转到本页面某一固定位置
跳转到新页面某一固定位置
使用a标签的name属性来设置锚点
设置跳转连接 a标签的href属性为#加上锚点名称
           <a href="#target">跳转到目标位置</a>
           ···
           <div id="target">这是目标位置</div>
       也可以跳转到其它页面固定位置
           <div id="fixed-position">这是目标页面的固定位置。</div>
           ···
           <a href="target.html#fixed-position">跳转到目标页面的固定位置</a>
           在上述示例中，“target.html#fixed-position”是目标页面的URL，后面是锚点（#）和目标位置的id值（这里是 “fixed-position”）。当用户点击链接时，会跳转到目标页面的id为 “fixed- position” 的元素位置。
           确保目标页面和源页面在同一个站点内，否则链接可能无法正常工作。此外，要确保目标页面上存在具有相应id的元素，否则无法正确跳转。
           请记住，浏览器会滚动到目标位置，如果目标位置在可见区域之外，用户可能需要手动滚动以查看该位置。

功能性连接：
跳转到邮箱 msn
mailto
以下是mailto的基本用法：
<a href="mailto:recipient@example.com">Send Email</a>

8.列表：
无序列表 ul
有序列表 ol
自定义列表 dl
ul 和ol 里面只能放li

无序列表可以用来作导航

9.表格：
table
行 tr
列 td
标题 th
colspan 跨列合并单元格
rowspan 跨行合并单元格
   快速生成表格代码 (tr>td*2)*4 例子代码

10.表单：
form action：表单数据提交到的地方 method：表单提交方式 enctype 编码类型 multipart/form-data (指表单数据有多部分构成,既有文本数据,又有文件等二进制数据)
get和post的区别：
get快大小有限制
post慢安全大小没有限制
       表单:
       登录 --> 前台传用户名密码到后台-->后台根据前台传过来的用户名密码查询 --> 查到登陆成功, 查询不到则报错
       注册

       <form method: "POSE" action="result.html" enctype="multipart/form-data">
"GET"
       GET 快
       POSE 安全

       input 表单元素:
           selected
           disable
           checked
           readonly

表单元素：
           input 输入框
text 文本框
password 密码框
radio 单选按钮
checkbox 复选框
file 文件域
submit 提交
reset 重置
button 普通按钮
image 图片按钮功能和提交按钮一样
           select 下拉列表框
           textarea 多行本域

表单三大高级应用：
1.隐藏域 typ=hidden
2.只读
3.禁用按钮置灰

   html
五种输入框 text password file(文件照片) textarea select(籍贯)
五种按钮 submit reset button checkbox(爱好) radio(性别)
hidden

11.媒体元素：
audio:播放音频
video：播放视频
controls 控件属性
autoplay 自动播放
loop 循环播放
source 可以播放多个视频或者音频

       <section class="main">主体</section> 有<h1-h6>使用
       <article class="aside">侧边栏</article>
       <audio src="" controls></audio> controls 控件
       autoplay 自动播放 loop 循环播放
       datalist 下拉列表

12.CSS
级联样式表
表现HTML 颜色字体背景边距。。。。

13.HTML引入CSS样式的三种方式：
行内样式
内部样式表
外部样式表
链接式
先加载CSS文件再加载HTML文件
导入式
先加载HTML文件，后加载CSS文件

行内样式>内部样式表>外部样式表
就近原则
HTML5 CSS3

14.选择器的作用与语法
我们要给HTML添加样式，关键是到底给哪一个HTML标签添加演示
选择器的作用就是帮助我们选定需要添加样式的HTML标签
选择器{
属性：属性值;
属性：属性值;
}

15.CSS三大基本选择器
标签选择器
类选择器
ID选择器
ID>类>标签
ID名称相同的一个页面只能具有一个，也就是ID选择器具有唯一性

16.CSS 6大高级选择器
层次选择器
子选择器
后代选择器
相邻兄弟选择器同级别下方的一个
通用兄弟选择器同级别下方
属性选择器
选中具有某个属性的标签
选中具有某个属性的标签并且属性值等于XXX
选中具有某个属性的标签并且属性值以XX开头
选中具有某个属性的标签并且属性值以XX结尾
选中具有某个属性的标签并且属性值包含XX
并集选择器
全局选择器 *
多个选择器之间使用逗号隔开
交集选择器
第一个选择器必须是标签选择器
第二个选择器必须是类选择器或者ID选择器
结构伪类选择器
设置超链接样式：
:link
:visited
:hover
:active
:first-child 表示选中当前元素（要求当前元素必须它父级元素的第一个子元素）
:last-child
表示选中当前元素（要求当前元素必须它父级元素的最后一个子元素）
:nth-of-type(1)
表示选中当前元素的第几个子元素

17.标签按照特性可划分为
块级元素和行内元素
块级元素：
独占一行
可以设置宽度和高度，如果没有设置的话，高度默认为0，宽度默认为浏览器窗口的宽度
行内元素：
可以喝其它行内元素拍成一行
不可以设置宽度和高度，它的大小是由里面内容撑起来的
会计元素可以包含行内元素，但是行内元素不可以包含块级元素，行内元素也可以包含行内元素

div 块级元素没有内外边距
header
main
footer
nav
aside
section article
按照功能可划分为：
容器级标签：
标签内部可以存放任意内容，包含容器级的标签。比如<h1>，<div>标签等
文本级标签：
div h ul ol dl li
标签内部只能存放文字或者类似文字的内容，比如存放图片、表单元素等。例如<p>标签
span p em strong a

18.CSS美化网页元素
字体样式
字体风格
字体粗细
字体大小
字体类型
字体：风格粗细大小类型
文本样式
颜色
三种表示法
英文表示法
色号表示法 #223344 #234
RGB表示法
水平对齐方式
左中右
首行缩进
2em 字符单位
行高
和height一起使用可以用来设置文本垂直居中
文本装饰
上划线下划线删除线
用来去除超链接默认的下划线
列表样式
去除默认小黑原点
列表定位
列表图标
超链接样式
:link
:visited
:hover 通常是悬浮的时候显示下划线
:active
背景样式
背景颜色
背景图片
背景平铺方式
背景定位

19.盒子模型
组成：外边距边框填充物实际内容
属性：外边距边框内边距元素内容
宽度=外边距+边框宽度+内边距+元素内容宽度
内外边距设置顺序：上右下左
我们自己设置的宽度和高度默认是元素内容的宽度和高度
box-sizing: content-box
border-box
border:风格宽度颜色没有顺序要求