HTML之开胃小菜:标签与属性

上上章讲了html标签分为双标签与单标签,然后再讲一下html具体有哪些标签。

等等等等,在这之前先说下几个不配拥有姓名的点,上节漏掉了,现在安排上!

1 html注释

<--  我是注释 -->
对,就长这样,在编辑器里的快捷键一般是Ctrl+/

2 文档声明

HTML之开胃小菜:标签与属性_第1张图片

文档声明必须放在第一行,或者说放在第一位,它必须在所有代码的前边

3 编码设置 字符集

如果网页出现乱码,就需要在head标签内加上

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

gb2312 简单中文 包括6763个汉字

BIG5 繁体中文 港澳台等用

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

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

所以以后最好还是设置编码为utf-8就可以了 这样就避免出现字符集不统一而引起乱码的情况了。


emmm,下边进入正题,介绍标签

1 排版标签 包括 标题标签 段落标签 水平线标签 换行标签

      标题标签:

                          h1 h2 h3 h4 h5 h6 依次从大到小 h1最大,h6最小

                         标题标签语义:  作为标题使用,并且依据重要性递减

   标题文本   

     注意: h1 标签因为重要,尽量少用,不要动不动就向你扔了一个h1。 一般h1 都是给logo使用,或者页面中最重要标题信息。h1在一        个页面只能使用一次,多次使用不利于seo(搜索引擎优化) 自然排名

段落标签:

p 单词缩写: paragraph 段落

文本内容

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

水平线标签:

hr 单词缩写: horizontal 横线

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


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


是单标签

换行标签:

br  单词缩写: break 打断 ,换行

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


2 文本格式化标签:

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

HTML之开胃小菜:标签与属性_第2张图片

3 图像标签

语法:

4 超链接标签

a  单词缩写: anchor 的缩写

文本或图像

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

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

注意:

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

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

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

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

base 标签 基本的

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

base 写到 之间

把所有的连接 都默认添加 target="_blank"

HTML之开胃小菜:标签与属性_第3张图片

163的首页,图像上倒数第二行, 全局设置,网页内所有的链接打开都是新建一个空白窗口

锚点定位:

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

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

第2集

 
2.使用“a href=”#id名>“链接文本"创建链接文本(被点击的)
 

注意不要忘记##########

5 特殊字符标签

HTML之开胃小菜:标签与属性_第4张图片

6 列表标签

有序列表 :

  1. 无序列表
  2. 无序列表
  3. 无序列表

无序列表:

  • 无序列表
  • 无序列表
  • 无序列表

自定义列表:

名词1
名词1解释1
名词1解释2
...
名词2
名词2解释1
名词2解释2
...

 

常用作网站底部链接导航

 


标签先介绍这些,然后再说一下基本属性

语法:

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

在上面的语法中,

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

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

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

采取 键值对 的格式 key="value" 的格式

比如:


属性是宽度,值为400。

下面在补充一下上边几个标签的属性值

文字和段落标签:h1-h6 p  align 对齐属性

HTML之开胃小菜:标签与属性_第5张图片

                             


标签的属性:

HTML之开胃小菜:标签与属性_第6张图片

 

无序列表 ul li 属性:

HTML之开胃小菜:标签与属性_第7张图片

有序列表 ol li 属性:

HTML之开胃小菜:标签与属性_第8张图片

      图像标签img  img属性

      HTML之开胃小菜:标签与属性_第9张图片

超链接标签 a 属性:

      HTML之开胃小菜:标签与属性_第10张图片

 

顺便再补充下超链接a:

HTML之开胃小菜:标签与属性_第11张图片

HTML之开胃小菜:标签与属性_第12张图片

上边的name也可以是id

电子邮件链接:

HTML之开胃小菜:标签与属性_第13张图片

 

 

 

 

 

 

 

 

 

 

 

 

 

 

你可能感兴趣的:(HTML笔记,前端笔记)