day02 初认html

几个常用的浏览器

1、google(Chromium)
2、Firefox(Gecko)
3、opera(Presto)
4、safari(webkit)

5.ie(Trident内核)

  • 不同的浏览器能够呈现一样的界面是因为有一个共同的标准
  • 理想状态我们的源码: .HTML(结构) .css(外貌) .js(行为)

html的意义

HTML(英文Hyper Text Markup Language的缩写)中文译为“超文本标签语言”,

HTML骨架格式

<HTML>   
    <head>   //存放头部信息   title必须设置   显示网页标题所在
        
        <title></title>
    </head>
    <body>
        //网页主体内容
    </body>
</HTML>

HTML标签分类

1.双标签

<标签名> 内容 </标签名>
比如 <p>一个段落  </p>

2.单标签

<标签名 />

单标签,用一个标签符号即可完整地描述某个功能的标签。

比如  <hr />表示一条水平线

HTML标签关系

标签的相互关系就分为两种:

1.嵌套关系

<head>  <title> </title>  </head>

2.并列关系

<head></head>
<body></body>

开发工具

  1. sublime
  2. Dreamweaver
  3. jetbrain webstorm
  4. hbuilder
  5. vs code

本人还是用webstorm

hbuilder用了一段时间也已经吃灰

sublime下载第一天用了之后准备卸载

文档类型<!DOCTYPE>

<!DOCTYPE html>

doc就是doument(文件)

type:类型

该头显示了文档的类型 流行html5开发网页

注意: 一些老网站可能用的还是老版本的文档类型比如 XHTML(政府网站,可用即可,不追求美观)之类的,但是我们学的是HTML5,而且HTML5的文档类型兼容很好(向下兼容的原则),xhtml/html4可以显示html5的内容

字符集

utf-8是目前最常用的字符集编码方式,常用的字符集编码方式还有gbk和gb2312。

gb2312 简单中文 包括6763个汉字(国标)

BIG5 繁体中文 港澳台等用

GBK(国标扩展)包含全部中文字符 是GB2312的扩展,加入对繁体字的支持,兼容GB2312

UTF-8则包含全世界所有国家需要用到的字符

记住一点,以后我们统统使用UTF-8 字符集, 这样就避免出现字符集不统一而引起乱码的情况了。

标签( 熟记)

单词缩写: paragraph 段落

在网页中要把文字有条理地显示出来,离不开段落标签,就如同我们平常写文章一样,整个网页也可以分为若干个段落,而段落的标签就是

<p>  文本内容  </p>

是HTML文档中最常见的标签,默认情况下,文本在一个段落中会根据浏览器窗口的大小自动换行。

水平线标签(认识)

单词缩写: horizontal 横线

在网页中常常看到一些水平线将段落与段落之间隔开,使得文档结构清晰,层次分明。这些水平线可以通过插入图片实现,也可以简单地通过标签来完成,


就是创建横跨网页水平线的标签。其基本语法格式如下:

<hr />是单标签

在网页中显示默认样式的水平线。

换行标签(熟记)

单词缩写: break 打断 ,换行

在HTML中,一个段落中的文字会从左到右依次排列,直到浏览器窗口的右端,然后自动换行。如果希望某段文本强制换行显示,就需要使用换行标签

<br />

这时如果还像在word中直接敲回车键换行就不起作用了。

div span标签

div span 是没有语义的 是我们网页布局主要的2个盒子

div 就是 division 的缩写 分割, 分区的意思 其实有很多div 来组合网页。

span, 跨度,跨距;范围

语法格式:

<div> 这是头部 </div>    <span>今日价格</span>

文本格式化标签(熟记)

在网页中,有时需要为文字设置粗体、斜体或下划线效果,这时就需要用到HTML中的文本格式化标签,使文字以特殊的方式显示。
标签的使用

标签属性

使用HTML制作网页时,如果想让HTML标签提供更多的信息,可以使用HTML标签的属性加以设置。其基本语法格式如下:

<标签名 属性1="属性值1" 属性2="属性值2" > 内容 </标签名>

在上面的语法中,

1.标签可以拥有多个属性,必须写在开始标签中,位于标签名后面。

2.属性之间不分先后顺序,标签名与属性、属性与属性之间均以空格分开。

3.任何标签的属性都有默认值,省略该属性则取默认值。

采取 键值对 的格式 key=“value” 的格式

比如:

<hr width="400" />

属性 是 宽度

值 是 400

图像标签img

单词缩写: image 图像

其基本语法格式如下:

该语法中src属性用于指定图像文件的路径和文件名,他是img标签的必需属性。

<img src="图像URL" />

链接标签(重点)

单词缩写: anchor 的缩写 。

在HTML中创建超链接非常简单,只需用标签环绕需要被链接的对象即可,其基本语法格式如下:

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

href:用于指定链接目标的url地址,当为标签应用href属性时,它就具有了超链接的功能。 Hypertext Reference的缩写。意思是超文本引用

target:用于指定链接页面的打开方式,其取值有_self和_blank两种,其中_self为默认值,_blank为在新窗口中打开方式。

注意:

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

2.内部链接 直接链接内部页面名称即可 比如 < a href=“index.html”> 首页

3.如果当时没有确定链接目标时,通常将链接标签的href属性值定义为“#”(即href="#"),表示该链接暂时为一个空链接。

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

锚点定位

通过创建锚点链接,用户能够快速定位到目标内容。
创建锚点链接分为两步:

1.使用“a href=”#id名>“链接文本"</a>创建链接文本。

2.使用相应的id名标注跳转目标的位置。

base 标签

base 可以设置整体链接的打开状态

base 写到 之间

特殊字符标签

在这里插入图片描述

注释标签

在HTML中还有一种特殊的标签——注释标签。如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字,就需要使用注释标签。其基本语法格式如下:

    <!-- 注释语句 -->

注释内容不会显示在浏览器窗口中,但是作为HTML文档内容的一部分,也会被下载到用户的计算机上,

查看源代码时就可以看到。

路径

实际工作中,通常新建一个文件夹专门用于存放图像文件,这时再插入图像,就需要采用“路径”的方式来指定图像文件的位置。

路径可以分为: 相对路径和绝对路径

相对路径

  1. 图像文件和HTML文件位于同一文件夹:只需输入图像文件的名称即可,如<img src=“logo.gif” />。
  2. 图像文件位于HTML文件的下一级文件夹:输入文件夹名和文件名,之间用“/”隔开,如<img src=“img/img01/logo.gif” />。
  3. 图像文件位于HTML文件的上一级文件夹:在文件名之前加入“…/” ,如果是上两级,则需要使用 “…/ …/”,以此类推,如<img src="…/logo.gif" />。

绝对路径

绝对路径

“D:\web\img\logo.gif”,或完整的网络地址,例如“http://www.itcast.cn/images/logo.gif”。

列表标签

什么是列表?

容器里面装载着文字或图表的一种形式,叫列表。

列表最大的特点就是 整齐 、整洁、 有序

无序列表 unorderlist

无序列表的各个列表项之间没有顺序级别之分,是并列的。其基本语法格式如下:

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
<
    /ul>
    
   
    
    
    
    
    
 1. <ul></ul>中只能嵌套<li></li>,直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
 2. <li>与</li>之间相当于一个容器,可以容纳所有元素。

显示效果如下

  • 咖啡
  • 啤酒
  • 瓜子
  • 花生

有序列表 orderlist

有序列表即为有排列顺序的列表,其各个列表项按照一定的顺序排列定义,有序列表的基本语法格式如下:

<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ol>
  1. 香蕉
  2. 苹果

定义列表(理解)

定义列表常用于对术语或名词进行解释和描述,定义列表的列表项前没有任何项目符号。其基本语法如下:

<dl>
  <dt>名词1</dt>
  <dd>名词1解释1</dd>
  <dd>名词1解释2</dd>
  ...
  <dt>名词2</dt>
  <dd>名词2解释1</dd>
  <dd>名词2解释2</dd>
  ...
</dl>

槟榔

湖南,海南产

有提神作用

吃多了不好

有点贵

可以写字

分为钢笔圆珠笔水珠笔等

价格不等

实用性高

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值