HTML基础篇01

 

第一节  HTML基础

<!doctype>作用

声明文档类型,告诉浏览器该用哪种规范来解析文档内容

 

常见的浏览器及其内核

  • Chrome      Blink
  • Firefox         Gecko
  • Ie                 Trident
  • Safari          webkit
  • Opera

 

常见的块级标签和行内标签分别有哪些?

块级:div    p h1~6     ul   li    ol   table     hr

行内标签: ins        span       I    b u    del        b

 

B和strong(i和em)标签的区别

都是文本加粗,后者起强调作用,给浏览器看

 

对语义化的理解

语义化是指用合理的html标记以及特有的属性去格式化文档,如,标题用h,段落用p,合理的给图片添加alt属性

可呈现很好的内容结构,代码可读性,便于维护,利于用户体验,利于爬虫

 

 

第二节  链接&表格&表单

如何合并表格单元格

  • 跨行合并 rowspan
  • 跨列合并 colspan

 

<thead><tbody><tfoot>有什么作用

thead 表格的头 用来放标题之类的东西

tbody 表格的身体 放数据本体

tfoot  表格的脚 放表格的脚注之类

 

常见表单元素有哪些

  • Text文本输入框
  • Password密码输入
  • Radio单选框
  • Checkbox复选框
  • Button普通按钮
  • Submit提交按钮
  • Reset清空
  • Lable绑定
  • File上传文件
  • Image图像形式的提交按钮
  • Select>option下拉列表
  • Textarea 多行文本输入框

 

第三节  css基础

引入css样式有几种

(1)内嵌式

通过<style></style>来书写CSS代码。

只能应用于当前网页,不能被其它网页共享。

注意:<style>标记可以放在网页的任何地方,但一般放在<head>。

(2)外联式

通过<link>标记来引入外部的CSS文件(.css)。

可以被其它网页共享。

格式:<link href=“CSS的URL” rel=“stylesheet” type=“text/css” />

注意:<link>标记只能放在<head>中

(3)行内样式

通过style的属性来书写CSS代码。

举例:<p style=“font-size:24px;”></p>

 

单行文本水平居中如何实现

添加text-align:center;

设置盒子的高度,line-height:盒子的高度;(垂直居中)

 

 

第四节  盒模型

选择器优先级如何计算

通过权重计算,复合选择器计算其权重之和在比较

  • *通配符0

  • 标签1

  • 类选择器10

  • Id选择器100

一般:行内样式>id>class>标签>通配符,行内样式优先

若父级元素和子集的样式发生冲突的时候,不管父级的权重多大,都归0;

!important具有最大优先级

权重相同时,就近原则

 

那些css属性是可以继承的?

Font-     text-       line-      color(a标签不会继承父级颜色)

1)、字体系列属性

  font-family:字体系列

  font-weight:字体的粗细

  font-size:字体的大小

font-style:字体的风格

line-height:行高

2)、文本系列属性

  text-indent:文本缩进

  text-align:文本水平对齐

color:文本颜色

text-decoration:文本修饰

 

简述css盒模型

本质是一个盒子,封装周围的html标签,它包括:边距、边框、填充、和实际内容

盒模型又称框模型(Box Model),包含了元素内容(content)、内边距(padding)、边框(border)、外边距(margin)几个要素。

由于IE盒模型的怪异模式,IE模型和标准模型的内容计算方式不同。

元素框的总宽度 = 元素(element)的width + padding的左边距和右边距的值 + margin的左边距和右边距的值 + border的左右宽度;

元素框的总高度 = 元素(element)的height + padding的上下边距的值 + margin的上下边距的值 + border的上下宽度。

 

如何用border实现小三角

sanjiao{

    width: 0;

    height: 0;

    border-bottom: 30px solid red;

    border-left: 30px solid transparent;

    border-right: 30px solid transparent;

}

 

Margin外边距常见问题及解决办法

Problem:外边距塌陷,父子标签嵌套,margin会取其中最大值

Method:

  • 给父级元素设置border或者添加内边距padding

  • 改变父级bfc渲染规则

Position:absolute/fixed

Display:inline-block

Flot:left/right

Overflow:hidden

 

第五节  浮动

块级标签和行内标签的区别

块级标签:

  • 独占一行,
  • 无内容宽由父级的宽,高为0

行内标签:

  • 一行显示,
  • 宽高无效,宽高由内容撑起,水平方向的padding和margin可以设置,垂直方向无效
  • 只能容纳文本、其他行内标签

行内块标签(input\image\td\button)

 

 

浮动产生的原因?清除浮动的方案?

标签浮动后,脱离正常文档流,导致父标签无法被撑开,且会影响后续正常布局

Method:

  • 设置父标签高度  
  • 清除浮动clear:both
  • 父标签添加overflow:hidden
  • 伪元素
父级标签::after{

    content:'内容’;//默认是行内元素,在一行显示

    display:block;

    clear:both;

}

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值