关于自学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. <C#>找出数组中重复次数最多的数值

    给定一个int数组,里面存在重复的数值,如何找到重复次数最多的数值呢? 这是在某社区上有人提出的问题,我想到的解决方法是分组. 1.先对数组中的所有元素进行分组,那么,重复的数值肯定会被放到一组中: ...

  2. 冒泡排序java代码

    冒泡排序就是依次取出最大数,然后依次交换放到数组最后边. 直观写法: public long[] sort(long[] a){ int n = a.length - 1; // Step:1 选出最 ...

  3. Androd开发之广告栏设计

    对于做Android开发的工程师对于这个效果的实现一定不陌生,本篇我将带领大家先简单实现这个效果,再为大家介绍一下其中的原理,方便新手学习,老手复习,内容简单易懂,没有基础一样学习,不扯没用的了,下面 ...

  4. Request 接收参数乱码原理解析二：浏览器端编码原理

    上一篇<Request 接收参数乱码原理解析一:服务器端解码原理>,分析了服务器端解码的过程,那么浏览器是根据什么编码的呢? 1. 浏览器解码 浏览器根据服务器页面响应Header中的“C ...

  5. Cocos2d-x 3.2 学习笔记（八）Action

    Action -动作.所有精灵的表现,人机交互的表现,都是动作.cocos2dx 里面封装的动作可谓是丰富! Action有三个子类 1.FiniteTimeAction类是所有在有限时间能够完成的动 ...

  6. JS&CSS文件请求合并及压缩处理研究（五）

    接上篇.在我们最终调用 @Html.RenderResFile(ResourceType.Script) 或者 @Html.RenderResFile(ResourceType.StyleSheet) ...

  7. 20款精致的长阴影 LOGO 设计【附免费生成工具】

    长阴影(Long Shadow)概念来自于最新非常流行的扁平化设计(Flat Design).扁平化设计趋势影响最大的是用户界面元素和图标,但它也开始蔓延到其他网页设计的其他部分. 长阴影其实就是扩展 ...

  8. Java魔法堂：finalize函数

    一.finalize与GC 在GC第一次进行可达性分析时会将不可达而且该对象所属类重写finalize方法和finalize方法重未被执行过的对象追加到F-Queue当中,然后JVM会自动开启一个低优 ...

  9. 【原创】Kakfa log包源代码分析(二)

    八.Log.scala 日志类,个人认为是这个包最重要的两个类之一(另一个是LogManager).以伴生对象的方式提供.先说Log object,既然是object,就定义了一些类级别的变量,比如定 ...

  10. jQuery实用的语法总结

    1.关于页面元素的引用 通过jquery的$()引用元素包括通过id.class.元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用do ...