关于自学HTML中遇到的各类细节问题

1.<a>表示链接标签，类似的有<img src>.链接的地址在<base>中填写。<base href="http://......."/>

2.<base>标签只能在头部中定义，并且只能出现一个。

3.<link>只能在头部中定义，但是可以出现多次。其中的href属性来指向所连接文档的url。他的值可以使任何有效的文档的url。

4.向前链接和反转链接rel/rev,二者可以同时包含在一个link中，也可以同时创建多个link标签。

5.link标签与外部链接（与css文件链接）。用到的是link的type属性。

6.<p>p标签标示段落。<p class =添加css样式中函数

<link href="main.css" rel="stylesheet " type="text/css" />   css样式中：

.p1{
font-size:10px;

7.用<style>标签为文档创建内部样式表

<style>只能在头部中出现，但可以在头部中多次出现。是唯一为文档创建内部样式表。用到的属性type。用的语言即使css，相当于潜藏在html内部的css。

例如：

    <title>

        style标签设置文档的类型

    </title>

    <meta charset="utf-8" />

    <style type="text/css">

        .p1{font-size:10px;}

        .p2{font-size:20px;}

        .p3{font-size:30px;}

    </style>

</head>

<body>

    <p class="p1">我喜欢你</p>

    <p class="p2">我喜欢你</p>

    <p class="p3">我喜欢你</p>

</body>

</html>

运行结果：省略：

8.根据不同的媒体设备设置样式：如style 的media属性，指向不同的设备。

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <meta charset="utf-8" />

    <style type="text/css">

        @media print {

           p{font-weight:bold;}

           }

            @media screen{

                p{font-weight:lighter ;}

            }

            @media print,screen{

                p{font-size:20px;}

            } 

    </style>

</head>

<body>

    <p>我喜欢你</p>

    <p>我喜欢你</p>

    <p>我喜欢你</p>

</body>

</html>

9.1<script>标签。为html添加脚本程序，脚本程序可以写在script内，也可以使用外部脚本文件。能使网页页面变得更加生动，并且能在客户端相应一定的事件，从而使页面具有良好的交互性。

script标签的type属性设置脚本语言的类型。通常有text/javascript和text/jsscript.通常使用前者。

例，当页面加载完成时弹出一个对话框。

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>

        设置脚本的类型

    </title>

    <script type="text/javascript" >

        window.onload = function () {

            alert("Hello World");

        }

    </script>

    <meta charset="utf-8" />

</head>

<body>

</body>

</html>

9.2外部脚本，通常Javascript与html分离，一般存放在.js的文件中。然后通过script的src属性引用该文件。

核心代码： <script type="text/javascript" src="mian.js">。

js文件中：

window.onload = function () {
alert("我喜欢你");
}

10<meta>标签，定义元数据，一把通过name或者http-equiv属性指定关键字。每一个关键字表示一个元数据段，通过content属性的设置该关键字对应的值来描述该元数据段。

meta不在页面中显示，但对网页的显示很重要。

meta标签定义的元数据，其中最重要的是：keywords和description。其中keywords描述文档的关键字，为搜索引擎提供线索，非常有用。description为搜索引擎提供一份关于文档的简单说明，非常有用。

HTML自学基础的更多相关文章

  1. Java自学基础、进阶、项目实战网站推荐

    推荐一个自学的好平台,有Java基础,前端,后端,基础的内容都有讲解,还有框架的讲解和实战项目,特别适合自学 JAVA 自学网站 JAVA 练习题 Spring 教程 Mybatis 教程 Sprin ...

  2. java自学基础、项目实战网站推荐

    推荐一个自学的好平台,有Java前端,后端,基础的内容都有讲解,还有框架的讲解和实战项目,特别适合自学 JAVA 自学网站 JAVA 练习题 Mybatis 教程 Spring MVC 教程 模仿天猫 ...

  3. python自学基础1week

    一.python老师介绍 二.为什么要学习python? 三.学习python有前途吗? 疗程1:语言基础 疗程2:网络编程 疗程3:web基础开发 疗程4:算法&设计模式 疗程5:pytho ...

  4. Python 自学基础（一）——元组 字典 文件操作

    格式化输出 name = input("请输入你的名字:") age = input("请输入你的年龄:") msg = ''' -------------in ...

  5. Python 自学基础（四）——time模块，random模块，sys模块，os模块，loggin模块，json模块，hashlib模块，configparser模块，pickle模块，正则

    时间模块 import time print(time.time()) # 当前时间戳 # time.sleep(1) # 时间延迟1秒 print(time.clock()) # CPU执行时间 p ...

  6. Java自学基础用法

    在慕课上面简单学习了一下java语言的用法 简单的用法总结记录一下. 代码(学习输入,输出): package hello; import java.util.Scanner; public clas ...

  7. OC语言自学基础知识总结

    一.成员变量的作用域 二.点语法 三.构造方法 四.分类 五.类的本质 六.自动生成getter和setter方法 七.description方法 八.id类型 九.SEL 一.成员变量的作用域 @p ...

  8. Java自学路线图之Java基础自学

    自学Java要从Java基础语法开始自学,自学Java的过程中打好基础是很重要的!首先自学:面向对象基础,API基础,集合基础.这些对Java小白的数学和英语能力的要求门槛不高,在学习的过程中积累相应 ...

  9. 从零基础到拿到网易Java实习offer，谈谈我的学习经验

    微信公众号[程序员江湖] 作者黄小斜,斜杠青年,某985硕士,阿里 Java 研发工程师,于 2018 年秋招拿到 BAT 头条.网易.滴滴等 8 个大厂 offer,目前致力于分享这几年的学习经验. ...

随机推荐

  1. Html与CSS快速入门01-基础概念

    Web前端技术一直是自己的薄弱环节,经常为了调节一个简单的样式花费大量的时间.最近趁着在做前端部分的开发,果断把这部分知识成体系的恶补一下.内容相对都比较简单,很类似工具手册的学习,但目标是熟练掌握. ...

  2. Unity内置的shader include files

    Unity内置的shader include files:这些文件都以.cninc结尾, HLSLSupport.cginc:自动包含,一些跨平台编译相关的宏和定义. UnityShaderVaria ...

  3. mongodb 关系、引用、覆盖索引查询

    一.关系 MongoDB 的关系表示多个文档之间在逻辑上的相互联系.文档间可以通过嵌入和引用来建立联系.MongoDB 中的关系可以是:1对1,1对多,多对1,多对多. 一个用户可以用多个地址,这是典 ...

  4. JAVA设计模式《二》

    上一篇为大家介绍了一下设计模式中的责任链模式,本篇为大家介绍一下关于设计模式中的单例模式与模板方法模式.单例模式的作用在于,保证应用中某个实例有且只有一个,单例模式又被分为:饱汉模式与饿汉模式,两者的 ...

  5. NYOJ 99单词拼接（有向图的欧拉（回）路）

    /* NYOJ 99单词拼接: 思路:欧拉回路或者欧拉路的搜索! 注意:是有向图的!不要当成无向图,否则在在搜索之前的判断中因为判断有无导致不必要的搜索,以致TLE! 有向图的欧拉路:abs(In[i ...

  6. 基于TCPCopy的Dubbo服务引流工具-DubboCopy

    TCPCopy顾名思义,就是一个可以将tcp流量复制的工具(其实也可以复制UDP).有了这样一个工具,我们就可以真实的复制线上流量,然后将这些流量复制到我们的测试服务器上.这样就可以很容易模拟线上真实 ...

  7. 【Android】[转] Android中Bitmap,byte[],Drawable相互转化

    一.相关概念 1.Drawable就是一个可画的对象,其可能是一张位图(BitmapDrawable),也可能是一个图形(ShapeDrawable),还有可能是一个图层(LayerDrawable) ...

  8. win7+theano with GPU enabled

    要做卷积神经网络的一些东西,所以要装theano,网上很多Theano安装教程版本较老,而各安装包更新很快,参考价值有限.走了很多弯路才装好,把这个过程记录下来,希望对大家有帮助~ ~ 我的配置:wi ...

  9. js基础篇——原型与原型链的详细理解

    js中的对象分为两种:普通对象object和函数对象function. function fn1(){}; var fn2 = function(){}; var fn3 = new Function ...

  10. JAVA - Redis的连接

    java连接linux Redis遇到的问题 昨天在Linux搭建了Redis服务,今天使用java连接测试了一下.要想使用java连接redis服务,就离不开jedis-2.6.1.jar.使用je ...