01-HTML深入

LoftySoul 发布于2019-04-23 13:32 / 2026人阅读

摘要：是由行构成行是由单元格构成。单元格跨行单元格可以向下跨越多个行，被占的单元格向右挤。国际贸易是世界经济增长的重要一环，美国公开违反世贸规则，大范围挑起贸易争端，势必破坏全球贸易秩序，危害世界经济增长。

1.1 浏览器的工作原理

把一些标签解析成用户可视化的页面

1.2 HTML中的标签与元素

在HTML中以开始，以结束，比如等。

标签和其内容统称为元素，比如：h5

元素可以有属性，比如 h5

1.3编码

数据以什么编码存入电脑，就必须以什么编码取出（解码）。

ASCLL码

计算机编码有UTF8、GB2312

1.4 HTML文档结构


DOCTYPE HTML>

<html>
    
    <head>head>
    
    <body>body>
html>

1.4.1 Head

head一般用于设置一些信息给浏览器解析时使用。一般在head中通过meta标签来设置这些参数

<head>
        
        <meta charset="utf-8"/>
        
        
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        
        
        <mata name="keywords" content="博客园">mata>
        <mata name="description" content="米商城直营小米公司旗下所有产品，囊括小米手机系列小米Note 3、小米8、小米MIX 2S，红米手机系列红米5 Plus、红米6 Pro，智能硬件，配件及小米生活周边，同时提供小米客户服务及售后支持。">mata>
        
        <title>小米商城title>
    head>

注：快速构建HTML结构的快捷键：!+Tab

1.5 标签的分类

1.5.1 快标签（block tag）

【1】独占一行

【2】能设置宽高

无语义标签：没有特定的用途 => 什么都可以显示 => 用于包含别的标签 => 一般用于容器容纳别的标签。

有语义标签：有特定的用途

1.5.1.1 DIV

div 是无语义标签，一般用于页面架构性布局（DIV+CSS）

<div id="top">
        aaaaa
div>

1.5.1.2 H1-H6

有语义标签，专门用于显示标题的。


        <h1>我是h1标题h1>
        <h2>我是h2标题h2>
        <h3>我是h3标题h3>
        <h4>我是h4标题h4>
        <h5>我是h5标题h5>
        <h6>我是h6标题h6>

1.5.1.3 列表相关

ol/li 表示有序列表（ordered list），有语义标签。li一定是作为ol的子节点。

ul/li 表示无序列表（unordered list）有语义标签，li一定是作为ol的子节点。



<body>
<ul>
    <li>完美生活li>
    <li>蓝莲花li>
    <li>一起摇摆li>
ul>
body>






<ul>
    <li>li>
ul>

<ul> 

   <li>li> 

   <li>li>

   <li>li> 

ul>




<body>
<ol>
    <li>完美生活li>
    <li>蓝莲花li>
    <li>一起摇摆li>
ol>
body>

dl/dt+dd 表示定义列表，有语义标签，一般dd可以有多个






<dl>
<dt>列表标题dt>
<dd>列表内容dd>
<dd>列表内容dd>
...
dl>




        
        <dl>
            
            <dt>程序员鼓励师dt>
            
            <dd>1、长相清新，声线甜美，微笑常在，人见人爱；dd>
            <dd>2、善于倾听，善不善沟通不重要，能忍受IT工程师死宅无法交流的性格；dd>
            <dd>3、耍不耍脾气不重要，要善于发现每一个程序暖男的天性，成功驯服；dd>
            <dd>4、了解互联网，懂科技，不然聊起来云里雾里，工程师会更受打击。dd>
        dl>

1.5.1.4 Table

table是由行（row）构成、行是由单元格（table-cell）构成。

…：表格的一行，所以有几对tr 表格就有几行。
…：表格的一个单元格，一行中包含几对…，说明一行中就有几列。
…：表格的头部的一个单元格，表格表头。
表格中列的个数，取决于一行中数据单元格的个数。
table表格在没有添加css样式之前，在浏览器中显示是没有表格线的

表头，也就是th标签中的文本默认为粗体并且居中显示





        <table border="1"  >
            <tr>
                <td>aatd>
                <td>bbtd>
                <td>cctd>
            tr>
            <tr>
                <td>aatd>
                <td>bbtd>
                <td>cctd>
            tr>
            <tr>
                <td>aatd>
                <td>bbtd>
                <td>cctd>
            tr>
        table>

1.5.1.4.1 单元格跨列

colspan一个单元格向右占多个列。

<table border="1">
            <tr>
                <td>11td>
                <td colspan="2">22td>
            tr>
            <tr>
                <td>aatd>
                <td>bbtd>
                <td>cctd>
                <td>cctd>
            tr>
        table>

1.5.1.4.1 单元格跨行

rowspan单元格可以向下跨越多个行，被占的单元格向右挤。

<table border="1">
            <tr>
                <td>11td>
                <td>22td>
                <td>33td>
            tr>
            <tr>
                <td rowspan="2">aatd>
                <td>bbtd>
                <td>cctd>
            tr>
            <tr>
                
                <td>bbtd>
                <td>cctd>
            tr>
        table>

1.5.1.5 P

标签表示段落


        <p>十年后的今天，世界经济复苏的势头远不如人们期许的那样强劲，信心的极端重要性并未减弱。然而，正如国际货币基金组织总裁拉加德所言，“笼罩世界经济的乌云正变得越来越重，最大和最重的乌云是信心的恶化”。恶化人们对世界经济发展前景信心的源头来自何方？只要随手翻一翻各国的报章，读一读那些有关美国同贸易伙伴大打贸易战忧心忡忡的报道，答案再清楚不过地摆在人们面前。p>
        <p>国际贸易是世界经济增长的重要一环，美国公开违反世贸规则，大范围挑起贸易争端，势必破坏全球贸易秩序，危害世界经济增长。世界银行上月初发布报告指出，全球关税广泛上升将会给全球贸易带来重大负面影响，对新兴市场和发展中经济体的影响尤为明显，特别是那些与美国贸易或金融市场关联度较高的经济体。权威人士预测，如果关税回到GATT/WTO（关贸总协定和世贸组织）之前的水平，世界经济将立即收缩2.5%，全球贸易量将削减60%以上，负面影响超过2008年国际金融危机。p>
    
        
        <p>
            <div>testdiv>
        p>

1.5.1.6 br

br表示换行，
我们把这种中间没有内容的标签称为开闭同体标签。

1.5.2 行内标签

【1】在一行内显示

【2】不能设置宽高，内容撑开宽高

1.5.2.1 span

span 是无语义行内标签，一般作为容器使用。

<span style="background: red;height: 100px;">Lorem ipsum dolor sit amet.span>TEST

1.5.2.2 a

a 表示链接

1.5.2.2.1 路径相关


        <a href="http://www.baidu.com/">百度a>
        
        
        
        <a href="C:UsersAdministratorDesktopindex-gbk.html">index-gbka>
        
        
        
        <a href="./index.html">indexa>
        <a href="index.html">indexa>

相对路径 . 表示当前目录， .. 返回上一级目录。链接找资源时，一定先从当前目录开始找，所以当前目录可以省略。

1.5.2.2.3 锚点

通俗地说，锚点就是指在页面内做调整

<div id="top">div>
        <div>
            <a href="#early-exp">早年经历a>
            <a href="#professional-exp">演艺经历a>
            <a href="#personal-life">个人生活a>
            <a href="#musics">音乐作品a>
        div>
        
        <p id="early-exp">早年经历Loremp>
        <p id="professional-exp">演艺经历Lop>
        <p id="personal-life">个人生活Lorem ipsum dolor p>
        <p id="musics">音乐作品Lorem p>
        <div>
            <a href="#top">TOPa>
        div>

1.5.2.3 Img

专门用于显示图片。

1.5.2.3.1常用属性

alt：当图片加载失败时的提示文本

title：当鼠标悬停时的提示文本

<img alt="阿黛尔" title="阿黛尔" src="https://gss3.bdstatic.com/-Po3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=d6e1fdf69325bc312b5d069e66e4ea8c/6f061d950a7b020880e017d968d9f2d3572cc8d9.jpg" />

1.5.2.4 var/strong/em

var、strong、em 本意表示强调作用，有语义标签，强调的表现形式不一样，var/em 斜体强调，strong加粗强调。

<var>我是varvar>  
<strong>我是strongstrong>   
<em>我是emem>

在实际开发过程中，一般来说都不用他们的本意，而是把他们降级成一般的无语义行内标签使用

服务器托管超融合服务器深入深入分析深入云计算 php深入

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/2013.html

01-html介绍和head标签

摘要：三开发工具的使用使用技巧编辑器四介绍的概述全称，翻译为超文本标记语言，它不是一种编程语言，是一种描述性的标记语言，用于描述超文本内容的显示方式。【转】01-html介绍和head标签主要内容web标准浏览器介绍开发工具介绍HTML介绍HTML颜色介绍HTML规范HTML结构详解一、web标准web准备介绍：w3c：万维网联盟组织，用来制定web标准的机构（组织）web标准：制作网页遵循的规范...

番茄西红柿 2019-04-23 11:51 评论0 收藏0
01.HTML

摘要：向服务器提交表单的通常做法是使用提交按钮。规定浏览器应该自动完成表单默认开启。规定在提交表单时所用的方法默认。规定识别表单的名称对于使用。表单元素表单元素是允许用户在表单中输入内容比如文本域下拉列表单选框复选框等等。网页的组成结构（HTML）：超文本标记语言表现(CSS):层叠样式表行为(JavaScript):脚本语言一个良好的网页要结构、表现、行为三者分离 HTML简...

aboutU 2019-08-02 15:22 评论0 收藏0
01.HTML

摘要：向服务器提交表单的通常做法是使用提交按钮。规定浏览器应该自动完成表单默认开启。规定在提交表单时所用的方法默认。规定识别表单的名称对于使用。表单元素表单元素是允许用户在表单中输入内容比如文本域下拉列表单选框复选框等等。网页的组成结构（HTML）：超文本标记语言表现(CSS):层叠样式表行为(JavaScript):脚本语言一个良好的网页要结构、表现、行为三者分离 HTML简...

Soarkey 2019-08-19 11:48 评论0 收藏0
JavaWEB开发01——HTML

摘要：网站信息页面需求分析我们公司的需要一个对外宣传的网站介绍介绍公司的主要业务公司的发展历史公司的口号等等信息技术分析概述超文本标记语言超文本比普通文本功能更加强大可以添加各种样式标记语言通过一组标签来对内容进行描述关键字是由浏览器来解释执行静 1.网站信息页面 1.1需求分析: 我们公司的需要一个对外宣传的网站介绍,介绍公司的主要业务,公司的发展历史,公司的口号等等信息 1.2技术分析:...

IntMain 2019-08-02 11:46 评论0 收藏0
rem 单位实现页面自适应布局

摘要：单位介绍既然扯到了这个单位，那就有必要先解释下这个单位具体含义，上的解释注意图中的画线部分，这个单位需要高版本的浏览器支持，不过，一般用于移动端布局，所以，基本上无需考虑浏览器版本问题，放心用吧。相对于根元素的大小，自动计算出其具体值。 A. 先看一个函数： /* * 设置根元素字体大小 * @param Number minSW 最小缩放的设备屏幕宽度 * @param Nu...

xavier 2019-08-21 14:31 评论0 收藏0