zoukankan      html  css  js  c++  java
  • 二 HTML文档基本结构

    2.1 HTML5文档结构:

    • HTML5文档结构包括头部(head)、主体(body)两大部分。

    2.1.1<!DOCTYPE>声明

    引用官方的DTD文件,在HTML5之前版本,如xHTML、HTML4.0都有官方的DTD文件引用,DTD是文件类型定义,主要对标签的使用进行定义。基于HTML5“化繁为简”准则,不需要引用严格意义上的DTD规范,只需引用<!DOCTYPE html>代码即可。

    2.1.2 <html>标签

    html文档的根元素,成对出现,代表文档的开始和结束。

    2.1.3 <head>标签

    <head></head>                              文档的头部标签,为所有头部元素的容器,<head>中元素可以引用脚本、指示浏览器在哪里找到样式表,提供元信息等
    <title></title>                             用于定义文档标题,只能出现在<head>中
    <meta>                                      用于定义html元数据
    <link rel="stylesheet" href="">             引用外部文件标签,通常放置在头部标签<head>中,用于连接外部CSS资源文件 
    <style></style> 为内嵌样式标签,位于<head>中,用于定义内部CSS样式

    2.1.4<meta>标签

    设置页面关键字——用于告诉搜索引擎网页的关键字
    <meta name="keyword" content="某人,论坛,学历,前端">
    用于告诉搜索引擎网站的主要内容 <meta name="description" content="web前端的一些面试技巧">
    用于介绍作者的一些信息 <meta name="author" content="某人,邮箱"> 设置网页的定时跳转 <meta http-equiv="Refresh" content="";URL=""> /*content后跟值为当前页面在多少时间跳转,URL值为跳转到具体的网页网站*/

    2.1.5 <body>标签

    body标签是HTML的主体部分,网页所需显示内容都放在该标签内。

    2.2 HTML5标签、元素及属性

    HTML网页实际由许许多多各种各样的HTML元素构成的文本文件,并且任何网页浏览器都可以直接运行HTML文件。

    HTML元素就是通过HTML标签进行定义的。

    2.2.1标签

    1.单标签    

    <br>                       换行
    <hr>                       创建一条水平线
    <meta>                   元素可提供有关页面的元信息
    <img src="" alt="">  图片标签,用于页面插入图片

    2.双标签

    <h1></h1>     标题标签
    <p></p>       段落标签
    <ul></ul>     无序列表标签
    <table></table>表格标签

    3.

    • 标题标签:<h1>-<h6>,<h1>标签代表1级标题,级别最高,文字最大其他标签依次递减;

               标题字对齐属性:align

                    center:    居中对齐;

                     left:     左对齐内容;

                     right:    右对齐内容;

                    justify:    对行进行伸展,每行都可有相同长度

    • 段落标签:<p>
    • 换行标签:<br>                   将文字在一个段内强制换行,一个<br>代表换行一次
    • 不换行标签:<nobr>            不换行内容放在<nobr><nobr/>之间;<nobr><nobr/>之间遇到<br>换行标签,内容将自动换行;
    • 水平线标签:<hr>                 将上下内容分隔开
    • 插入空格:&nbsp;
    • 插入特殊字符:“&”开头,“;”结尾,中间加上特殊字符对应编码即可,特殊字符对应编码链接: https://www.jb51.net/onlineread/htmlchar.htm

    2.2.2 标签属性

    • <标签名 属性名1=“属性值1” 属性名2=“属性值2” ……>内容部分</标签名>   两个不同的属性之间不需要分号
    • <p style="color:red;font-size:20px;background-color:white"> style属性中的不同设置需要分号

    2.2.3 元素

    <p>HTML</p>       开始标签到结束标签所有代码,为HTML元素
                      位于起始标签和结束标签之间的文本为HTML元素内容

     

     

    行内元素和块级元素区别

    块级元素:独占一行,表现为另起一行,而且其后元素也必须另起一行显示;宽度(width)、高度(height)、内边距(padding)、外边距(margin)都可控制。

    行内元素:和相邻的行内元素在同一行显示,宽度(width)、高度(height)、内边距padding-top/padding-bottom和外边距的margin-top/margin-bottom都不可改变,但是内边距的padding-left/padding-right和margin-left/margin-right等属性都可以设置。

    浏览器还有默认的行内元素,<img> 、<input>、<button>等,有内在尺寸,可设置宽高,但不会自动换行。

  • 相关阅读:
    Microsoft Prerelease Software Visual Studio Code Name "Orcas" January 2007 Community Technology Preview (CTP)
    Attribute Example In MSDN
    AutoEventWireup 20032005
    转ASP.NET中常用的优化性能方法
    转 用whitespace:nowrap;解决中文标签标签换行问题
    RBAC 模型初探[转]
    .net开源相关
    Path.GetExtension 方法
    应用程序注释规范
    Web.config的写入操作
  • 原文地址:https://www.cnblogs.com/hudaxian/p/13852696.html
Copyright © 2011-2022 走看看