网页标签介绍,行级、块级元素,选择器的知识点, HTML的6种空格

网页标签介绍

<html lang="en,zh"> lang="en,zh":告诉搜索引擎爬虫,我们的网站是关于什么内容的

<!-- 以下两行代码可以提高该网页在百度上网路搜索引擎爬虫的喜欢程度,可以把网页的关键字提高到前面几页 -->
<meta content="招生服务" name="keywords"> <!-- 这是关键字 -->
<meta content="这是一个招生安全服务平台" name="description"> <!-- 这是这个网页的描述(content里面是介绍内容) --> 
&nbsp; ---> 空格
&lt; ---> <小于符号
&gt; ---> >大于符号
<br> ---> 回车换行符
<hr> ---> 横线
// reversed:逆序排列
// start:在ol li中应用,从第四个开始排序,1/a/A/i/I中start中都是用数字表示第几个开始排序
<ul type="" reversed="reversed" start="4"><li></li></ul>
// src:图片的路径
// alt:图片占位符(当图片不能加载是在网页中提示该图片是什么)
// title:图片提示符(当鼠标放到图片上时会出现该图片的介绍信息)
<img src="" alt="这是某某" title="这是什么">
// 超链接,target中可调属性在另外一页打开本链接
<a href="超链接地址" target=“_blank”></a>

// 锚链接,href里面的是id名称,可以用来置顶
<a href="#a1">名称</a>

// 在用手机浏览时点该链接会对相应的号码进行拨打
<a href="tel:15085405150">给我打电话</a>

// 在浏览时点该链接会进入邮箱对相应的目标邮箱发送邮件
<a href="mailto:1111111111@qq.com">给我发邮件</a>

// 协议限定符,可以强制运行a标签里面的JavaScript代码
<a href="JavaScript: while(1){alert(‘让你手欠!!!’)}”>点击进入js的循环</a>
// onfocus作用是当鼠标聚焦到输入框时value里面的提示消失,如果输入框里面有输入文字则当重新聚焦时则不会清除里面的内容
// this.style.color=’red’是输入文字的文字颜色
// onblur作用是当鼠标点击其他地方失去焦点时value里面的提示显示,如果输入框里面有内容则不会显示提示信息
// this.style.color='#999'是提示框的文字颜色
<input type="text" name="username" style="color: #999" value="请输入用户名"
onfocus="if(this.value=='请输入用户名'){this.value='';this.style.color='red'}"
onblur="if(this.value==''){this.value='请输入用户名';this.style.color='#999'}">
// checked作用是默认选中,也可用于多选框中
<input type="radio" name="sex" value="boy" checked="checked">

行级,块级元素

行级元素  inline
:内容决定元素所占位置,不可通过css改变宽高
span  strong  em  a  del

块级元素  block
:独占一行,可通过css改变宽高
div  p  ul  li  ol  form  address

行级块元素  inline-block
:内容决定大小,可以改变宽高

display:inline|block|inline-block

凡是带有inline的元素都有文字特性   如:
<img src="">img
<img src="">img
<img src="">img
这三张图片中间有4像素的空隙
解决方法:1.把img写成一行:<img src=""><img src=""><img src="">
         2.用css代码:img{margin-left:-4px;}

选择器的知识点

!important > 行间样式 > id选择器 > class|属性选择器 > 标签选择器 > 通配符(*)

CSS权重:可比较选择器的优先级
!important                        Infinity(正无穷)
行间样式                           1000(256进制)
id                                100(256进制)
class|属性选择器|伪劣选择器         10(256进制)
标签选择器|伪元素选择器             1(256进制)
通配符选择器                       0(256进制)

 HTML的6种空格

  非断行空格(&nbsp;)是常规空格的宽度,可运行于所有主流浏览器。其它几种空格(&ensp; &emsp; &thinsp; &zwnj; &zwj;)在不同浏览器中宽度各异。
  &nbsp;【不换行空格】全称为No-Break Space,它是最常见且使用最多的空格,是按下space键产生的空格。在HTML中,如果用空格键产生此空格,空格是不会累加的(只算1个)。要使用html实体表示才可累加,该空格占据宽度受字体影响明显而强烈。
  &ensp;【半角空格】全称是En-Space,en是字体排印学的计量单位,为em宽度的一半。根据定义,它等同于字体宽度的一半(如16px字体中就是8px)。名义上是小写字母n的宽度。此空格传承了空格家族一贯的特性:空格颜色透明,此空格有个相当稳健的特性,即其占据的宽度正好是1/2个中文字符宽度,而且基本上不受字体影响。
  &emsp;【全角空格】全称是Em-Space,em是字体排印学的计量单位,相当于当前指定的点数。例如 1em 在16px的字体中就是16px。此空格也传承空格家族一贯的特性:空格颜色透明,此空格特性也相当稳健,即其占据的宽度正好是1个中文字符宽度,而且基本上不受字体影响。
  &thinsp【窄空格】全称是Thin-Space,我们不妨称之为“瘦弱的空格”,即该空格长得比较瘦弱,身体单薄,占据的宽度比较小,是 em 宽度的六分之一。
  &zwnj【零宽不连字】全称是Zero Width Non Joiner,简称“ZWNJ”,不打印字符,放在电子文本的两个字符之间,抑制本来会发生的连字,而是以这两个字符原本的字形来绘制。Unicode中的零宽不连字字符映射为(zero width non-joiner,U+200C),HTML字符值引用为&#8204;。
  &zwj;【零宽连字】全称是Zero Width Joiner,简称“ZWJ”,不打印字符,放在某些需要复杂排版语言(如阿拉伯语、印地语)的两个字符之间,使得这两个原本不会发生连字的字符产生了连字效果。零宽连字符的Unicode码位是U+200D (HTML字符值引用为&#8205; &zwj;)。
  此外,浏览器还会把以下字符当作空白进行解析:空格&#x0020; 制表位&#x0009; 换行&#x000A; 和回车&#x000D; 还有&#12288;

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值