HTML5教程

HTML5

本文主要是介绍HTML5,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

HTML

网页的构成

  • HTML:用来制作网页基础内容和基本结构
  • CSS:用来制作网页美化效果
  • JavaScript:用来制作网页动态效果

HTML:超文本标记语言,是一种标记语言,使用元素和属性来编写页面

超文本:比普通文本更强大

标记:就是标签,可以使用一系列的标签,将网络上的文档格式统一,使分散的资源连接为一个逻辑整体

快速入门:

<h1 align="center">这是我的第一个入门案例<h1>
    
## align="center"  居中显示

页面说明

组成部分

学习html的重点

掌握标签所代表的含义

掌握在标签中属性的含义

基本语法

注释
  1. 注释:是用于解释说明程序的
  2. 注释的格式:
  1. 注释的特点
  • 被注释掉的标签,不会被浏览器解析
标签
  1. 标签的分类

    • 开始和结束标签:

    • 自闭和标签:

      水平分割线
  2. 标签的嵌套

    • 正确的嵌套格式:

      文本

  3. 块级元素和行内元素

    块级元素:在页面中以块的形式展现,自己独占一行,后面的内容会自动换行


    行内元素:在页面中以行的形式展现,不会换行。加粗 斜体 可以给文本内容添加下划线

  4. div和span

  • :是一个通用的内容容器,没有特殊语义。一般用来对其他元素进行分组,用于样式化相关的需求
  • :是一个通用的行内容器,没有特殊语义,一般用来编织元素以达到某种样式

  • 标签核心作用是布局页面

HTML的属性

  1. 什么是属性
    • 属性可以提供一些额外的信息,这些信息不会直接显示在内容中,但可以改变标签的样式或提供数据使用
  2. 定义格式
    • 属性名=属性值
  3. 属性的规范
    • 同一个标签中属性的名称必须唯一
    • 不区分大小写,建议使用小写
    • 属性值可以使用单引号或双引号括起来,建议使用双引号
  4. 常用的属性
    • class:定义元素的类名,用来选择和访问特定的元素
    • id:定义元素的唯一标识,在整个文档中必须是唯一的
    • name:定义元素的名称,一般用于表单数据提交到服务器
    • value:定义在元素内显示的默认值,一般用于表单标签中
    • style:定义元素的css样式

HTML的特殊字符

文本标签

hr的属性:size-大小 color-颜色

ul的属性:type-列表样式(disc实心圆、circle空心圆、square实心方块)

ol有序列表的属性:type-列表样式(1数字、A或a字母、I或i罗马字符) start-起始位置

斜体标签:

加粗标签:

文字标签: size-大小 color-颜色

图片标签:

表单标签:

autocomplate开启的话会把之前输入过的内容自动提示出来

get:表单数据会显示在地址栏中,不安全,地址栏的url长度有限制!

post:表单数据不会显示在地址栏中,数据封装在请求体中,安全。长度没有限制。

标签:

该标签用于定义超链接,作用是从一个页面链接到另一个页面

1、语法格式:

2、属性

3、锚点链接

在href属性中,设置属性值为#名字的形式,如:

找到目标标签,里面添加一个id属性=刚才的名字,如:

特殊字符:


表单项标签:

type属性值:

radio为了达到单选的效果,name属性值必须一致



合并单元格


注意:

ul中只能放li,但是li中是可以放其他元素的

无序列表中各项是没有顺序之分的,是并列的

无序列表会带有自己的样式属性,在实际中我们会用css样式来控制


表单控件

是单标签

type属性设置不同的属性值来指定不同的控件类型

input标签的重要属性:

checked属性针对input中的radio和checkbox

lable标签

行内元素

行内块元素


背景颜色

background-color:transparent; 透明的,清澈的;

background-image: 属性描述了元素的背景图像

none是默认值

背景平铺:可以使用background-repeat属性来设置。

页面元素既可以添加背景图片,也可以添加背景颜色,但是背景图片会压住背景颜色

background-position属性可以改变图片在背景中的位置


background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动


层叠样式

相同样式才会覆盖

继承

子元素会继承父元素的某些样式

优先级

复合选择器会有权重叠加的问题

权重虽然有叠加但是不会有进位

CSS






内边距Padding

内边距padding不会撑开盒子的情况

如果盒子本身没有指定width/height属性,此时padding不会撑开盒子

外边距margin

margin属性用于设置外边距,即控制盒子与盒子之间的距离

margin: 30px; 只写一个代表上下左右都是30px的距离

margin: 20px 30px; 写两个代表上下30,左右50像素

四个的话是上右下左

典型应用

外边距可以让块级盒子水平居中,但是必须满足2个条件

  1. 盒子必须指定了宽度
  2. 盒子左右外边距都设置为auto

常见的写法,以下三种都可以

  • margin-left:auto; margin-right:auto;

  • margin:aoto;

  • margin: 0 auto;

注意:以上方法是让块级元素水平居中,行内元素或者行内块元素水平居中给其父元素添加text-align:center;即可

嵌套块元素垂直外边距塌陷问题

对于两个嵌套关系的块元素,父元素有上外边距,同时子元素也有上外边距,此时父元素会塌陷较大的外边距值

解决方法:

  1. 可以给父元素定义上边框
  2. 可以给父元素定义内边距
  3. 可以给父元素添加overflow:hidden;
  4. 还有其他方法:比如浮动、固定、绝对定位的盒子不会有塌陷问题
清除内外边距

网页元素有很多默认的内外边距,而且不同浏览器默认的也不一致,因此在布局前,首先要清除下网页元素的内外边距

* {
	padding: 0;   /*清除内边距*/
	margin: 0;	  /*清除外边距*/
}

注意:行内元素为了照顾兼容性,尽量只设置左右内外边距,不要设置上下内外边距,但是转换为块级和行内元素就可以了

行内元素尽量只设置左右的内外边距

疑问?
  1. 布局为啥不都用div?

    标签是有语义的,在合理的地方用合理的标签。比如产品标题就用h,大量文字就用P,靠积累

  2. 为啥用南无多类名?

    类名就是给每个盒子都起来一个名字,可以更好地找到这个盒子,选取盒子更加容易,后期维护方便

  3. 到底用margin还是padding

    大部分情况下可以混用,两者各有优缺点,根据实际情况来,总是有更简单的方法来实现。

    padding会把盒子撑大

  4. 自己没有思路?

    布局有很多实现方式,先模仿后作出自己的风格

圆角边框

在css3中增加了圆角效果

border-radius: 属性设置元素的外边框圆角

语法:border-radius:length;

圆角边框的原理:

radius:半径圆的半径 :椭圆与边框的交集形成圆角效果

参数可以为数值或者百分比的形式

要是圆形可以是宽度的一半,或者50%

可以跟4个值:左上 右上 左下 右下

两个值是对角线一样

可以只改变一个角:border-top-left-radius

盒子阴影

css3中增加了box-shadow这个属性为盒子增加阴影

语法:

文字阴影

text-shadow:设置文字阴影

浮动

网页布局的本质-用css来排放盒子,把盒子摆到相应位置

css中提供了3中传统布局方式

  • 普通流

    就是标签按照规定好的方式进行排列

    1.块级元素会独占一行,从上到下顺序排序

    常用元素:div、hr、p、h1-h6、ul、ol、dl、form、table

    2.行内元素会按照顺序排序,从左到右顺序排序,碰到父元素边缘会自动换行

    常用元素:span、a、i、em等

    标准流是最基本的布局方式

  • 浮动

  • 定位

为什么需要浮动?

  1. 如何让多个块级盒子水平排成一行?

    浮动最典型的应用:可以让多个块级元素排列一行显示。

网页布局第一准则:多个块级元素纵向排列找标准流,多个块级元素横向排列找浮动

什么是浮动?

float属性用于创建浮动框,将其移动到一边,直到左边缘或者右边缘触及包含块或者另一个浮动框的边缘。

语法:

float:属性值;

浮动特性:

  1. 浮动元素会脱离标准流(脱标)

  2. 浮动的盒子不再保持原先的位置

  3. 如果多个盒子都设置了浮动,则他们会按照属性值一行内显示并且顶端对其排列

  4. 浮动元素会有行内块元素特性

    任何元素都可以浮动,不管原先是什么模式的元素,添加浮动后都具有行内块元素相似的特性

    如果块级盒子没有设置宽度,默认宽度和父级一样宽,但是添加浮动后,它的大小根据内容来决定

    浮动的盒子中间是没有缝隙的,是紧挨着一起的

    行内元素同理

为了约束浮动元素位置,我们网页布局一般采取的策略是:

先用标准流的父元素排列上下位置,之后内部子元素采取浮动左右位置,符合网页布局第一准则

网页布局第二准则:先设置盒子大小,后设置盒子位置

'>'子代选择器,div>li 只选择亲儿子

浮动布局注意点:

  1. 浮动和标准流的父盒子搭配

    先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置

  2. 一个元素浮动了,理论上其余兄弟元素也要浮动。

    一个盒子里面有多个盒子,如果其中一个盒子浮动了,那么其他兄弟也应该浮动,以防止引起问题。

    浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流

元素的显示与隐藏
  1. display显示隐藏
  2. visibility显示隐藏
  3. overflow溢出显示隐藏
display属性

display:none;隐藏对象

display:block; 除了转换为块级元素之外,同时还有显示元素的意思

注意:display隐藏元素后,不再占有原来的位置

visibility

inherit:继承上一个父对象的可见性

visible:对象可视

hidden:对象隐藏

collapse:主要用来隐藏表格的行和列

注意:隐藏元素后继续占有原来的位置

overflow

overflow属性指定了如果内容溢出一个元素的框(超过其指定高度及宽度)时,会发生什么?

visible:不剪切内容,也不添加滚动条

auto:此为body对象和textarea的默认值,在需要时剪切内容或者添加滚动条,溢出的时候才显示滚动条

hidden:不显示超过对象尺寸的内容

scroll:总是显示滚动条,不溢出也显示滚动条

CSS高级技巧

精灵图

为什么要学习精灵图?

为了有效地减少服务器接收和发送请求的次数,提高网页的加载效率,出现了CSS精灵技术

核心原理:将网页中一些小背景图整合到一张大图上,这样服务器只需要一次请求就·可以了。

vertical-align

用于设置一个元素的垂直对齐方式,但是他只针对行内元素或者行内块元素才有效

溢出的文字省略号显示
  1. 先强制一行内显示文本

    white-sapce:nowrap; (默认是nomal自动换行)

  2. 超出的部分隐藏

    overflow:hidden;

  3. 文字用省略号替代超出部分

    text-overflow: ellipsis;

多行文本溢出显示省略号

多行文本溢出显示省略号有较大的兼容性问题,适合于webKit浏览器或者移动端(移动端大部分都是weKit内核)

  1. overflow:hidden;
  2. text-overflow: ellipsis;
  3. display:-webkit-box; /弹性伸缩盒子模型显示/
  4. -webkit-line-clamp: 2; /限制在一个块元素显示的文本行数/
  5. -webkit-box-orient: vertical; /设置或检索伸缩盒子对象的子元素的排列方式/

常见的布局技巧

  1. margin负值的应用
  2. 文字围绕浮动元素
  3. 行内块的巧妙运用
  4. css三角强化

层叠样式表。

用于设置和布局网页的一种计算机语言,告知浏览器如何渲染解析页面元素。

组成:

选择器:选择HTML元素的方式,可以使用标签名,class属性值,id值等多种方式

样式声明:用于给HTML元素设置具体的样式,格式是 属性名:属性值

格式如下:

选择器{
	属性名:属性值;
	属性名:属性值;
	属性名:属性值;
}
h1{
	color: red;
	font-size: 5px;
}

基本语法

css的引入方式
  1. 内联样式

    • 在标签中通过style属性来控制样式,只能影响当前这一行

    • 格式:

      <标签 style="属性名:属性值;属性名:属性值;">内容</标签>

  2. 内部样式

    • 在标签中通过

这篇关于HTML5的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!