Day01-HTML

1.浏览器的内核

​ 浏览器内核包括两部分:渲染引擎和js引擎。渲染引擎负责读取网页内容,整理讯息,计算网页的显示方式并显示页面,js引擎是解析执行js获取网页的动态效果。

浏览器内核名称
IE浏览器内核Trident内核,也是俗称的IE内核;
Chrome浏览器内核以前是Webkit内核,现在是Blink内核;
Safari浏览器内核Webkit内核;
Firefox浏览器内核Gecke内核,俗称Firefox内核;
Opera浏览器内核最初是自己的Presto内核,现在是Blink内核;

2.web标准构成

  • Web标准不是某一个标准,而是由W3C和其他标准组织定制的一系列标准的集合。
  • 主要包括结构(Structure)、表现(Presentation)和行为(Behavior)三个方面。
含义内容
结构用于对网页元素的进行整理和分类,指的就是HTML
表现用于设置网页元素的版式、颜色、大小等外观样式,指的就是CSS
行为指网页模型的定义以及交互的编写,主要指的就是JavaScript

3.HTML常用标签

3.1标题标签

标题特点:加粗、上下有边距

<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>

3.2段落标签

表示文本的段落,上下有边距,独占一行段落后面由空白撑开

<p> 文本内容 </p>

3.3换行标签

强制换行

<br>

3.4水平线标签

加一个水平线

<hr/>

3.5div标签

html中使用最多的标签

<div> 块内容 </div>
<div> 块内容 </div>
<div> 块内容 </div>

是块级标签,独占一行

3.6span标签

span标签可以作为包含文本内容的标签,可以通过span标签设置内容的美化效果

<span> 文本内容 </span>
<sapn> 文本内容 </sapn>
<span> 文本内容 </span>

是行内元素

3.7标签总结

标签名定义说明
<h1>~<h6>标题标签作为标题使用,并且依据重要性递减
<p></p>段落标签可以把HTML文档分割为若干段落
<hr/> 水平分割线
<br/>换行标签强制文本换行
<div></div>div标签用来设置布局,一行只能有一个div标签
<span></span>span标签用来设置布局,一行上可以有多个span标签

4.文本格式化标签

标签显示效果
<b> </b> <strong> </strong>文本为粗体样式显示
<i> </i> <em> </em>文本为斜体样式显示
<s> </s> <del> </del>文本为加删除线样式显示
<u> </u> <ins> </ins>文本为加下划线样式显示

5.图像标签img

添加图像标签如下

<img src=""/>

属性:

  • src:该属性指定图片的所在的位置,可以是相对路径,也可以是绝对路径。

  • alt:该属性指定一段文本,用来作为图片的提示信息、

  • height:指定图片的高度,属性值可以是百分比,也可以是像素值。

  • width:指定图片的宽度,属性值可以是百分比,也可以是像素值。

  • title:光标放上去的提示信息。

    1.在同一文件夹:<img src="logo.gif"/>
    2.图片在HTML下一文件夹:<img src="img/logo.gif"/>
    3.图片位于HTML上一文件夹:<img src="../logo.gif"/>
    

6.链接标签

<a herf="跳转目标地址" target="目标窗口的弹出方式">文本或图像</a>

属性:

  • herf:用于指定链接的目标的地址
  • target:窗口的打开方式属性值有_self_blank两种,_self为默认值,在覆盖当前窗口打开,_blank为在新窗口中打开方式。

注意点:

1.外部链接需要添加 http://www.baidu.com

2.内部链接可以直接访问 <a href="index.html">首页</a>

3.href属性值定义为"#“(href=”#"),表示该链接暂时为一个空链接

4.不仅可以创建文本超链接,在网页中各种网页元素图像,表格,音频,视频等都可以添加超链接

7.锚点定位

可以通过创建锚点链接,可以快速定位到目标内容

创建锚点链接分为两步:

  1. 使用<a href="#id名">链接文本</a>创建链接文本(被点击的元素)

    <a href="#com">链接文本</a>
    
  2. 使用相对应的id名标注跳转目标的位置。(找目标位置元素)

    <h1 id="#com">关于我们</h1>
    

8.网页的icon图标

  • 添加icon图标
<link rel="icon" href="http://baidu.com/favicon.ico"
  • meta元素作用
搜索引擎的关键字
<meta name="keywords" content="弱点工程,弱点工程...."/>
页面显示内容
<meta name="description" comtent="和智电子科技有限公司, 是一家集施工研发,销售,服务于一体的高新技术企业,公司已成功承揽过各类企业弱电工程,酒店弱电工程,政府弱电工程,安防监控工程,智能弱电工程,综合布线工程等。"

9.特殊字符

显示结果描述实体名称
空格&nbsp
全角空格&emsp
<小于号&lt
>大于号&gt
©版权&copy
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值