关于自学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. 34988 Happy Reversal(二进制去取反)

    /* 题意:给多个二进制数,对某些数进行按位取反操作! 然后从中找到最大数和最小数,并输出他们的差值! 注意:所有的数都是整数,包括取反之后 思路:一个n为二进制数x,令tmp为n位全1!则 y=tm ...

  2. C++智能指针简单剖析

    导读 最近在补看<C++ Primer Plus>第六版,这的确是本好书,其中关于智能指针的章节解析的非常清晰,一解我以前的多处困惑.C++面试过程中,很多面试官都喜欢问智能指针相关的问题 ...

  3. 应用 CSS3 动画实现12种风格的通知提示

    今天我们想分享几个简单的款式的网站通知效果.有很多的方式来呈现消息给用户:从经典的咆哮般的通知到窗口顶部的通知栏.各个网站的通知样式和效果千篇一律,难得出现创意的通知效果.这里是实现一个应用 CSS3 ...

  4. 【转】图文详解YUV420数据格式

    YUV格式有两大类:planar和packed. 对于planar的YUV格式,先连续存储所有像素点的Y,紧接着存储所有像素点的U,随后是所有像素点的V.对于packed的YUV格式,每个像素点的Y, ...

  5. Android Activity返回键控制的两种方式

    Android Activity返回键监听的两种方式 1.覆写Activity的OnBackPressed方法 官方解释: Called when the activity has detected ...

  6. Windows Azure HandBook (2) Azure China提供的服务

    <Windows Azure Platform 系列文章目录> 对于传统的自建数据中心,从底层的Network,Storage,Servers,Virtualization,中间层的OS, ...

  7. 利用ListView的基本方法实现效果

    日常的开发工作经常需要ListView作为布局的组件,而且很多时候都会遇到需要自定义ListView的情况. 也有些问题并不需要自定义的ListView,基于原生的ListView就能实现,但需要灵活 ...

  8. java中String的相等比较

    首先贴出测试用例: package test; import org.junit.Test; /** * Created by Administrator on 2015/9/16. * */ pub ...

  9. Maven提高篇系列之（五）——处理依赖冲突

    这是一个Maven提高篇的系列,包含有以下文章: Maven提高篇系列之(一)——多模块 vs 继承 Maven提高篇系列之(二)——配置Plugin到某个Phase(以Selenium集成测试为例) ...

  10. jQuery动态设置样式List item

    前段时间,Insus.NET有修改一个功能<激活当前视图菜单高亮呈现>http://www.cnblogs.com/insus/p/5287093.html 今天Insus.NET想改用另 ...