概述
HTML( Hyper Text Markup Language 超文本标记语言)
<books id='1'>标签体</books>
HTML( Hyper Text Markup Language 超文本标记语言)
标签体
1.常见的文本标签
1.1. h1-h6 内容标题
1.2. 段落标签 p
1.3. hr水平分割线
1.4. br换行
2.列表标签
2.1. 无序列表 ul 和 li
2.2. 有序列表 ol和li
2.3.列表嵌套
3.图片标签img
3.1超链接a
4.表格标签table
4.1.表单form
4.2.文本框
4.3.特殊字符（实体引用）
4.4.分区标签
5.CSS 层叠样式表 用于美化页面
5.1.三种引入方式:
5.2.选择器
5.4.颜色赋值
5.5.背景图片
5.6.文本相关
5.7.元素的显示方式display
5.8.盒子模型= 宽高+外边距+边框+内边距
5.9.宽高:
5.10.外边距
5.11.盒子模型之边框
5.12.盒子模型之内边距
CSS的三大特性
1.继承性
2.层叠性
3.选择器优先级
定位方式
1.定位方式之静态定位(文档流定位)
2.定位方式之相对定位
3.定位方式之绝对定位
4.定位方式之固定定位
5.定位方式之浮动定位
溢出设置overflow
行内元素的垂直对齐方式vertical-align
显示层级z-index
超文本： 不仅仅是纯文本还包括字体样式相关和多媒体信息（音频视频图片）
1.常见的文本标签
1.1. h1-h6 内容标题
独占一行 自带上下间距 字体加粗 字体大小不一
1.2. 段落标签 p
独占一行 自带上下间距
1.3. hr水平分割线
1.4. br换行
在html中 回车只能识别成一个空格 需要换行使用br
2.列表标签
2.1. 无序列表 ul 和 li
2.2. 有序列表 ol和li
属性： type控制图标类型 start控制起始值 reversed 降序
2.3.列表嵌套
有序列表和无序列表可以任意无限嵌套
3.图片标签img
src：路径
相对路径： 访问站内资源时使用
文件和页面同级： 直接写文件名
文件在页面的上级： ../文件名
文件在页面的下级： 文件夹名/图片名
绝对路径： 访问站外资源 ，又称为图片盗链（好处节省本站资源，坏处：有可能找不到图片）
alt:图片不能正常显示时显示的文本
title：鼠标悬停时显示的文本
width/height: 设置宽高
两种方式：1.像素 2. 百分比
如果只设置宽度 高度会等比例缩放
3.1超链接a
href：类似于src， 资源路径， 可以指向页面资源或文件资源，如果是页面资源直接显示，如果是文件资源浏览器支持浏览则直接浏览不支持则下载
图片超链接： 用a标签包裹img图片 则是图片标签
页面内部跳转， 在目的地元素里面添加id=“xxx" 然后通过超链接的href=”#xxx“ 跳转到指定元素的位置
4.表格标签table
标签： table tr表示行 td表示列 th表头 caption表格标题
属性： table(border边框 cellspacing单元格间距 cellpadding单元格距内容的距离) td(colspan跨列 rowspan跨行)
4.1.表单form
作用： 获取用户输入的各种信息 并且把信息提交给服务器
学习form表单主要学习的就是form表单中的各种控件，包括：文本框，密码框，提交按钮，单选，多选，下拉选等
4.2.文本框
input type=text 属性 name value值 placeholder占位文本 maxlength最大字符长度 readonly只读
密码框： input type=password 属性和文本框通用
单选： input type=radio checked默认选中
label标签： 扩充点击范围 点字也能生效
多选： input type=checkbox checked默认选中
日期： input type=date
文件： input type=file
下拉选： select 里面装多个option标签 option里面可以添加selected
文本域： textarea cols一行显示的数量 rows行数
提交按钮： input type=submit
重置按钮： input type=reset
自定义按钮： input type=button
4.3.特殊字符（实体引用）
空格  ： html中连续写多个空格只能识别出一个空格， 这种现象称为空格折叠现象,如果需要显示多个空格使用以下内容;
小于号 <
大于号 >
4.4.分区标签
作用: 分区标签可以理解为一个容器,里面装各种有相关性的标签, 便于统一管理
div:块级分区元素, 特点: 独占一行
span:行内分区元素, 特点: 共占一行
如何对页面内容进行分区?
一般情况下 一个页面至少分为3大区域,每一个大的区域内还会有n个小的分区
html
<div>头</div>
<div>体</div>
<div>脚</div>
4.5.html5标准中新增了几个分区标签:
header头 footer脚 article正文/文章 section区域 nav导航 这几个分区标签的作用和div一样
html
<header>头</header>
<article>体</article>/<section>体</section>
<footer>脚</footer>
5.CSS 层叠样式表 用于美化页面
5.1.三种引入方式:
内联: 在标签的style属性中写样式代码 不能复用
内部: 在head标签里面添加style标签 里面写样式代码 不能多页面复用
外部: 在单独的css文件中写样式代码, 在html页面中通过link标签引入 可以多页面复用 ,可以将css代码和html代码分离 工作中用的最多
优先级:内联最高 内部和外部一样 后执行的覆盖先执行的
5.2.选择器
标签名 div{}
id #id{}
类 .class{}
分组选择器 标签名,#id,.class{}
任意元素 *{}
属性 标签名[属性名='xxx']{}
子孙后代 div span{}
子元素 div>span{}
伪类 a:visited/link/hover/active{}
5.4.颜色赋值
颜色单词 red
6位16进制 #ff0000
3位16进制 #f00
3位10进制 rgb(255,0,0)
4位10进制 rgba(255,0,0,0-1)
5.5.背景图片
background-image:url("路径") ; 设置背景图片
background-size: 宽度 高度; 设置背景图片尺寸
background-repeat: no-repeat; 禁止重复
background-position: 横向百分比 纵向百分比; 位置
5.6.文本相关
文本修饰 text-decoration: underline/overline/line-through/none;
文本水平对齐方式 text-align: left/right/center
文本颜色: color:red;
行高 line-height: 20px ; 可以实现垂直居中
阴影 text-shadow: 颜色 x偏移值 y偏移值 浓度
字体大小 font-size:20px;
字体加粗 font-weight: bold/normal;
斜体 font-style: italic;
字体设置 font-family: xxx,xxx,xxx,xxx; font: 20px xxx,xxx,xxx;
5.7.元素的显示方式display
display: block; 块级元素 独占一行 可以修改宽高 包含: h1-h6,p,div等
display: inline; 行内元素 共占一行 不能修改宽高 包含: span,b,i,u,small,超链接a等
display:inline-block; 行内块元素 共占一行 并且能修改宽高 包括:img,input等
每个元素都有自己默认的显示方式 但是这个显示方式可以根据用户需求改动
5.8.盒子模型= 宽高+外边距+边框+内边距
5.9.宽高:
两种赋值方式
像素
上级元素百分比
行内元素不能修改宽高
5.10.外边距
外边距: 元素距上级元素或相邻兄弟元素的距离称为外边距
赋值方式:
单独某一个方向赋值: margin-left/right/top/bottom:10px;
四个方向赋值: margin:10px;
上下和左右赋值: margin: 10px 20px;
居中 margin:0 auto;
上右下左顺时针赋值 margin:10px 20px 30px 40px;
上下相邻两个元素同时添加上下外边距 此时取最大值 , 左右相邻两个元素同时添加左右外边距此时两个外边距相加
行内元素上下外边距无效
body自带四个方向8个像素的外边距 , h1-h6和p标签都是自带上下间距 这个间距就是通过外边距实现的
粘连问题: 当元素的上边缘和上级元素的上边缘重叠时, 给元素添加上外边距会出现粘连问题,给上级元素添加overflow:hidden解决此问题
5.11.盒子模型之边框
赋值方式:
四个方向赋值 border: 粗细 样式 颜色;
单独某个方向赋值 border-left/right/top/bottom: 粗细 样式 颜色;
圆角: border-radius:20px; 值越大越圆 当超过宽高一半时 为正圆形.
5.12.盒子模型之内边距
元素边缘距元素内容(元素文本或子元素)的距离称为外边距
给元素添加内边距会影响元素的宽高
赋值方式和外边距类似
padding-left/right/top/bottom:10px; 单独某一个方向赋值
padding:10px; 四个方向赋值
padding:10px 20px; 上下10 左右20
padding:10px 20px 30px 40px; 上右下左顺时针 CSS的三大特性
1.继承性
元素可以继承上级元素文本和字体相关的样式, 部分标签自带效果不受继承影响 比如: 超链接字体颜色,h1-h6字体大小不受继承影响
2.层叠性
多个选择器有可能选择到同一个元素, 如果设置的样式不同则全部层叠生效,如果作用的样式相同,则由优先级决定.
3.选择器优先级
作用范围越小优先级越高
#d1{ color:red; } div{ color:blue; }定位方式
包括: 静态定位,相对定位,绝对定位,固定定位,浮动定位
1.定位方式之静态定位(文档流定位)
格式: position:static; 这是默认的定位方式
特点: 块级元素从上往下排列 行内元素从左向右排列
如何控制元素位置: 通过外边距
2.定位方式之相对定位
格式: position:relative;
特点: 元素不脱离文档流(不管元素显示到什么位置 仍然占着文档流中的位置)
如何控制元素位置: 通过left/right/top/bottom , 相对于元素的初始位置做偏移
3.定位方式之绝对定位
格式:position:absolute;
特点: 元素脱离文档流(不占原来的位置)
如何控制元素位置: 通过left/right/top/bottom,相对于窗口(默认)或某一个上级元素做位置偏移
如果需要以某个上级元素做参照物的话需要给上级元素添加 position:relative;
4.定位方式之固定定位
格式: position:fixed;
特点: 元素脱离文档流
如何控制元素位置: 通过left/right/top/bottom 相对于窗口做位置偏移.
5.定位方式之浮动定位
格式: float:left/right;
特点: 脱离文档流,元素从当前所在行向左或向右浮动, 当撞到上级元素或其它浮动元素时停止.
如果一行装不下会自动换行,换行时有可能被卡住
应用场景: 当需要将纵向排列改成横向排列时使用浮动定位
当元素的所有子元素全部浮动时,自动高度会识别为0, 通过给元素添加overflow:hidden解决此问题
溢出设置overflow
visible 超出显示(默认)
hidden 超出隐藏, 解决粘连问题和高度识别为0的问题
scroll 超出滚动显示
行内元素的垂直对齐方式vertical-align
top: 上对齐
middle:中间对齐
bottom:下对齐
baseline: 基线对齐
显示层级z-index
z-index的值越大显示越靠前
最后
以上就是搞怪电灯胆为你收集整理的 HTML基础应用的全部内容，希望文章能够帮你解决 HTML基础应用所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复