HTML5(3)__H5基本语法(上)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Richard_xx/article/details/75412958

1 HTML基本骨架

<!DOCTYPE html>         声明文档类型
<html lang="en">        根标签
<head>                  头标签
    <meta charset="UTF-8">
    <title>Title</title> 标题标签
</head>
<body>                      主体标签

</body>
</html>


2 Doctype文档声明头

任何一个标准的HTML页面,第一行一定是一个以
1 <!DOCTYPE ……
开头的语句。
这一行,就是文档声明头,DocType Declaration。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范


3 meta标签

<meta>标签通常用于指定网页的描述,关键词,文件的信息,作者等其他数据


1 <meta charset=UTF-8">
字符集用meta标签定义,meta表示“元”。“元”配置,就是表示基本的配置项目。
charset就是charactor set“字符集”的意思。这个meta不用背,谁背谁傻,用sublime生成就行。
中文能够使用的字符集三种:(utf-8,gb2312,gbk)
第一种:UTF-8
1 <meta charset=UTF-8">
第二种:gb2312
1 <meta charset=gb2312">
也可以写成gbk


有两个字库UTF-8和gb2312。

UTF-8是国际通用字库,里面涵盖了所有地球上所有人类的语言文字,比如阿拉伯文、汉语、鸟语……

gb2312 是国标,是中国的字库,里面涵盖了汉字和一些常用外文,比如日文片假名,和常见的符号。

字库规模:  UTF-8(字全) > gb2312(只有汉字)
我们用meta标签可以声明当前这个html文档的字库,但是一定要和保存的类型一样,否则乱码!(重点
总结:
UTF-8 字多,有各种国家的语言,但是保存尺寸大,文件臃肿;
gb2312字少,只用中文和少数外语和符号,但是尺寸小,文件小巧。

4 title标签

<title>Title</title> 标题标签


网页的head标签里面,表示的是页面的配置,有什么配置?
字符集、关键词、页面描述、页面标题。
今后我们还能看见一些配置:IE适配、视口、iPhone小图标等等……

5 注释:

<!--注释的文字-->

6 标题标签

<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>


7 段落标签

<p>段落标签</p>
<p>段落标签</p>
<p>段落标签</p>



8 水平线标记

在页面中插入一条水平线的标记是<hr>,这个标签是单标签,单标签不需要闭合标签


9 换行标签:shift+enter

br标签是可以强制段落进行换行,不受空格影响
br标签也是一个单标签
<br/>元素是一个空的HTML元素,由于关闭标签没有任何意义,因此它没有结束标签




10 输出空格显示效果

我们无法确定HTML被显示的确切效果,屏幕的大小,以及对窗口的调整都可能导致不同的效果,对于HTML,您无法通过在HTML代码中添加额外的空格或者换行来改变输出的效果
当显示页面时,浏览器会移除源代码中多余的空格和空行,所有连续的空格和空行都会被算作一个空格。
在HTML标签中的文本,如果有大量空格、换行、缩进,都只会被渲染成为一个空格。这个现象叫空白折叠现象。




11 图片标签的使用

在网页中需要添加一些图片,那么就要使用到img这个标签,要在页面中显示图片,那么需要使用到src属性(源属性):源属性的值是图像的URL
语法:<img src = “图片地址”, alt = “如果图片没找到显示的文字”, title = “图片文字”>


<imgsrc="http://img4.imgtn.bdimg.com/it/u=2907166542,1036904956&fm=21&gp=0.jpg">    此处为引用网络地址的图片


<img src="img.jpg">    本地图片的添加

设置图像的高度与宽度
height(高度) 与 width(宽度)属性用于设置图像的高度与宽度
<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">

提示: 指定图像的高度和宽度的一个很好的习惯。如果图像指定了高度宽度,页面加载时就会保留指定的尺寸。如果没有指定图片的大小,加载页面时有可能会破坏HTML页面的整体布局。
Alt属性:当图片不能正常显示的时候的替代文字

12:超链接标签

超链接的定义:HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面.
超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
一个未访问过的链接显示为蓝色字体并带有下划线。
访问过的链接显示为紫色并带有下划线。
点击链接时,链接显示为红色并带有下划线


(1)超级链接标签:a
<a href="http://www.baidu.com">百度</a>
href 是指跳转的地址

(2)如果要在新的页面打开链接需要设置target
<a href = “http://www.baidu.com”  target = “_blank”> 超级链接内容 </a>

(3)将图片作为超链接
<p>创建图片链接: <a href="http://www.baidu.org"><img src="img/sc6.jpg" width="100px" height="100px"></a></p>

(4)创建邮件超链接
<p>
这是另一个电子邮件链接:
<a href="mailto:guagua@example.com?cc=guagua@example.com&subject=play game&body=今天晚上我们去开黑!" >发送邮件!</a>
</p>

(5)创建锚点链接
创建锚点链接
通过锚点链接,用户可以快速定位到目标内容
创建锚点链接分为两步
1. 使用相应的id名标注跳转的位置
2. 使用<a href = “#id名”> 链接文本 </a> 创建链接文本
<p><a href="#C4">查看 Chapter 4。</a></p>
<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>
<h2><a name="C4">Chapter 4</a></h2>


13:列表标签   

1.1无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。
无序列表使用 <ul> 标签,每一项用<li>标签
<h4>无序列表:</h4>
<ul>
  <li>Android</li>
  <li>H5</li>
  <li>嵌入式</li>
</ul>


1.2 无序列表的不同显示方式:通过在标签中设置style属性 style = "list-style-type:类型名"
<p><b>注意:</b> 在 HTML 4中 ul 属性已废弃,HTML5 已不支持该属性,因此我们使用 CSS 代替来定义不同类型的无序列表如下:</p>


<h4>圆点列表:</h4>
<ul style="list-style-type:disc">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ul>  


<h4>圆圈列表:</h4>
<ul style="list-style-type:circle">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</lio>
</ul>  


<h4>正方形列表:</h4>
<ul style="list-style-type:square">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ul>


1.3 同样,有序列表也是一列项目,列表项目使用数字进行标记。 有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。列表项项使用数字来标记。 
<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>




1.4 有序列表的不同的编号显示:在 标签中添加 type属性,选择相应的显示模式
<h4>编号列表:</h4>
<ol>
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  


<h4>大写字母列表:</h4>
<ol type="A">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  


<h4>小写字母列表:</h4>
<ol type="a">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  


<h4>罗马数字列表:</h4>
<ol type="I">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  


<h4>小写罗马数字列表:</h4>
<ol type="i">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  


1.5 标签嵌套
<h4>嵌套列表:</h4>
<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>


可以嵌套多层:
<h4>嵌套列表:</h4>
<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea
        <ul>
          <li>China</li>
          <li>Africa</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Milk</li>
</ul>




1.6 自定义列表不仅仅是一列项目,而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
dl是英语define list定义列表的意思,用于定义一些词。
dt是英语define title 定义标题
dd是英语define description 定义描述的意思


<h4>一个自定义列表:</h4>
<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>


中国主要城市
    <dl>
    <dt>北京</dt>
        <dd>帝都。政治中心!</dd>
        
        <dt>上海</dt>
        <dd>魔都。经济中心!</dd>
        
        <dt>广州</dt>
        <dd>花都。南大门!</dd>
    <dl>




dt、dd必须交替出现,合法格式:
 <dl>
    <dt></dt>
        <dd></dd>
        
        <dt></dt>
        <dd></dd>
   
        <dt></dt>
        <dd></dd>
    <dl>




2.7 dt、dd都是容器级标签,里面和div、li一样,都能放置任何东西。
<dl>
    <dt>北京</dt>
        <dd>
        <p>帝都。政治中心!</p>
        <p>北京有很多名胜古迹,比如</p>
            <ul>
            <li>颐和园</li>
                <li>圆明园</li>
                <li>传智播客总部</li>
            </ul>    
        </dd>
        
        <dt>上海</dt>
        <dd>魔都。经济中心!</dd>
        
        <dt>广州</dt>
        <dd>花都。南大门!</dd>
    <dl>

列表的一些具体用途:
  


阅读更多
换一批

没有更多推荐了,返回首页