美文网首页
HTML 基础

HTML 基础

作者: 王岩_shang | 来源:发表于2018-07-13 14:13 被阅读13次

一 . 基础

  1. 标题 <h1> -<h6>
  2. 段落 <p>
  3. 链接<a href="">
  4. 图片<img>
  5. 标签对空行和空格进行控制< pre >
  6. 演示不同的“计算机输出”标签的显示效果<code>
  7. HTML 文件中写地址<address>
  8. 实现缩写或首字母缩写
<abbr title="etcetera">etc.</abbr>
<br />
<acronym title="World Wide Web">WWW</acronym>
  1. 块引用 <blockquote>
  2. 删除和下划线
<p>一打有 <del>二十</del> <ins>十二</ins> 件。</p>

二. 元素 和属性

  1. HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码。
    属性为 HTML 元素提供附加信息。属性和属性值对大小写不敏感。但是HTML 提示:使用小写属性。
    始终为属性值加引号
    属性值应该始终被包括在引号内。双引号是最常用的,不过使用单引号也没有问题。在某些个别的情况下,比如属性值本身就含有双引号,那么您必须使用单引号。


  2. 还是 <br />
    您也许发现
    与 <br /> 很相似。
    在 XHTML、XML 以及未来的 HTML 版本中,不允许使用没有结束标签(闭合标签)的 HTML 元素。
    即使
    在所有浏览器中的显示都没有问题,使用 <br /> 也是更长远的保障。

  3. HTML 输出 - 有用的提示
    我们无法确定 HTML 被显示的确切效果。屏幕的大小,以及对窗口的调整都可能导致不同的结果。
    对于 HTML,您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。
    当显示页面时,浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是,HTML 代码中的所有连续的空行(换行)也被显示为一个空格。

三. HTML 样式

  1. HTML 的 style 属性
    style 属性的作用:提供了一种改变所有 HTML 元素的样式的通用方法。
    样式是 HTML 4 引入的,它是一种新的首选的改变 HTML 元素样式的方式。通过 HTML 样式,能够通过使用 style 属性直接将样式添加到 HTML 元素,或者间接地在独立的样式表中(CSS 文件)进行定义。
  2. HTML的 css
    HTML中的样式
    本例演示如何使用添加到 <head> 部分的样式信息对 HTML 进行格式化。
    没有下划线的链接
    本例演示如何使用样式属性做一个没有下划线的链接。
    链接到一个外部样式表
    本例演示如何 <link> 标签链接到一个外部样式表。
  3. 使用
    外部样式表
    当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

内部样式表
当单个文件需要特别样式时,就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表。

<head>

<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>

内联样式
当特殊的样式需要应用到个别元素时,就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。

<p style="color: red; margin-left: 20px">
This is a paragraph
</p>

HTML script 元素

<script> 标签用于定义客户端脚本,比如 JavaScript。

script 元素既可包含脚本语句,也可通过 src 属性指向外部脚本文件。

必需的 type 属性规定脚本的 MIME 类型。

JavaScript 最常用于图片操作、表单验证以及内容动态更新。

下面的脚本会向浏览器输出“Hello World!”:

<script type="text/javascript">
document.write("Hello World!")
</script>

相关文章

网友评论

      本文标题:HTML 基础

      本文链接:https://www.haomeiwen.com/subject/ihejpftx.html