关于自学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. 分享系列--面试JAVA架构师--链家网

    本月7日去了一趟链家网面试,虽然没有面上,但仍有不少收获,在此做个简单的分享,当然了主要是分享给自己,让大家见笑了.因为这次是第一次面试JAVA网站架构师相关的职位,还是有些心虚的,毕竟之前大部分时间 ...

  2. 纯CSS实现JS效果研究

    利用CSS3:checked选择器和~配合实现tab切换 效果: 代码: <style> body,div,input,label{ margin:0; padding:0; } #tab ...

  3. Create New Commands in Tcl

    Create New Commands in Tcl eryar@163.com 摘要Abstract:Tcl/Tk脚本可以很容易实现用户自定义的命令,方便的创建图形化的用户界面GUI,所以Tcl和T ...

  4. 学习WPF——使用Font-Awesome图标字体

    图标字体介绍 在介绍图标字体之前,不得不介绍图标格式ICON ICON是一种图标格式,我们操作系统中各种应用程序都包含一个图标 比如QQ程序的图标是一个可爱的企鹅,我的电脑是一个显示器图标 ----- ...

  5. poj1949Chores（建图或者dp）

    /* 题意:n个任务,有某些任务要在一些任务之前完成才能开始做! 第k个任务的约束只能是1...k-1个任务!问最终需要最少的时间完成全部的 任务! 思路:第i个任务要在第j个任务之前做,就在i,j之 ...

  6. XML序列化的时候如何支持Namespace

    我曾经不止一次(当然不仅仅是我意识到这个问题)说到过,XML标准中的Namespace的设计其实是一个较为失败的设计,它有它的优点,但缺点更多. http://zzk.cnblogs.com/s?w= ...

  7. Java多线程系列--“基础篇”11之 生产消费者问题

    概要 本章,会对“生产/消费者问题”进行讨论.涉及到的内容包括:1. 生产/消费者模型2. 生产/消费者实现 转载请注明出处:http://www.cnblogs.com/skywang12345/p ...

  8. js断点调试心得

    虽然网上已经有多的数不清的调试教程了,但仍然没有发现哪篇文章写的通俗易懂,索性自己尝试写写自己的一些使用习惯或者说是心得,希望对那些还不是很懂得使用断点调试的孩子有一些帮助(大神请无视~). 1.断点 ...

  9. StringExtensions

    public static string MakeSafeSql(this string s) { string t = s; t = t.Replace("'", "' ...

  10. Python访问剪切板

    剪切板访问工具 ----pyperclip he purpose of Pyperclip is to provide a cross-platform Python module for copyi ...