zoukankan      html  css  js  c++  java
  • HTML基础学习总结

    一、HTML的一些基本描述

      全称:Hyper Text Markup Language

      定义:超文本标记语言,是标记语言而不是编程语言,使用标记标签来描述网页,所以也被称为网页

      格式:标签对里面放纯文本,网页显示时对这些标记解释,然后显示文本

    二、HTML的标签

    1. 标题(heading)

      通过<h1></h1>、<h2></h2>…<h6></h6>来描述,类似于大标题,中标题,小标题,如(省略了头和尾)

      <h1>学习HTML--1</h1>

      <h2>学习HTML--2</h2>

      <h3>学习HTML--3</h3>

      浏览器会自动在标题的前后添加一个空行,不要为了产生粗体和大号的文本而用标题

      2.段落(paragraph)

      通过<p></p>来描述,如

      <p>just for test</p>

      浏览器会自动在段落的前后添加一个空行,可以通过<br/>来换行,而不用重起一个段落

      3.链接

      通过<a></a>来描述,如

          <a href =”http://www.baidu.com”>This is a link</a>

          其中,href是链接的属性,指链接的对象,要写http://,不然这个链接是替换当前目录下的链接(只是原本链接的一部分),不会真的链接到百度

          target属性,将其设置为_blank,那么链接会在新窗口打开

          链接到同一页面的不同位置,例如:

          <html>

        <body>

          <p><a href="#test">查看 test</a></p>

          <h2><a name="test">test</a></h2>

          <p>just for test </p>

        </body>

      </html>

      这样,点击查看test文本,页面会自动跳到h2的位置(测试时文本比较多,这里文本太少,跳与没跳没有区别)。上面的文本“查看test”就叫做锚

      4.图像

      通过<img />来描述,如

             <img src="test.png" alt=”test” width="104" height="142"  />

          替换文本属性alt是在浏览器无法载入图片时显示替换文本

          属性align是对图片的排布

          将img标签放在a标签内可以将图片作为链接

      PS:标签对大小写不敏感,标签应该关闭,虽然浏览器会显示出来。

      5.表格

      先来一个表格实例,

      <table border="1" cellspacing=”5” cellpadding=”10”>

        <tr>

          <th rowspan="3" align=”left”>跨三行</th>

          <td>row,cell</td>

          <td>row,cell</td>

        </tr>

        <tr>

          <td>row 1,cell 1</td>

          <td>row 1,cell 2</td>

          <td>row 1,cell 3</td>

        </tr>

        <tr>

          <td>row 2,cell 1</td>

          <td>row 2,cell 2</td>

          <td>row 2,cell 3</td>

        </tr>

      </table>

          表格标签是<table>,行的标签是<tr>,单元格的标签是<td>,<th>标签是将单元格中的文本作为标题(加粗,放大)

          表格可以设置很多属性:border设置边框的粗细(0就是没有边框),cellspacing是设置单元格之间的间隔,cellspadding是设置单元格内容和边框之间的空白大小,bgcolor可以设置背景颜色(也可以给单元格设置),background可以设置背景图片(也可以给单元格设置),align可以设置单元格中内容的排布位置

          表格还可以用来设计一定的格式排版

      6.列表

      1)         无序列表----<ul>

      列表项标签<li>,type有disc(圆形黑点)、circle(空心圆点)、square(矩形黑点)

      2)         有序列表----<ol>

      列表项标签<li>,type有1、A、a、I(罗马数字大写)、i(罗马数字小写)

      3)         自定义列表----<dl>

      列表项标签<dt>,标签<dd>是对<dt>的注释,会缩进

      7.表单

      一般格式如下:

      <form>

      ****

      <input type=”***” name=”***” value=”***” />

      ****

      <br/>

      </form>

      1)         文本域(Text Fields)

      Type字段为text

      2)         单选按钮(Radio Buttons)

      Type字段为radio,name值相同的项只能选择一个

      3)         复选框(checkBoxes)

      Type字段为checkbox

      4)         表单的动作属性

      Type字段为submit,增加form标签的属性action,action指向表达提交的目的文件文件名

      5)         下拉列表

      <select><option></option></select>  其中option就是下拉选项,可以设置option的属性selectde=”selected”将该option设置为预选项

      6)         文本域

      <textarea rows=”10” cols=”10”>

      7)         按钮

      Type字段为button

      8.框架

      标签<frameset> 作用是将一个浏览器页面拆分,显示多个htm网页

      内联框架<iframe>是将网页嵌到另一个网页中,即是在一个网页中显示另一个网页

    三、HTML的元素

      开始标签和结束标签之间的内容称为元素;空元素的结束标签一般用<****/>这种形式

    四、HTML的属性

      属性是对元素的更多的描述,比如

      <h1 align = “center”>Test</h1>  其中的align属性就是对h1的对齐方式进行描述,此处是居中

      <body bgcolor=”blue”></body> 其中的bgcolor属性就是对body的背景颜色进行描述

      PS:属性的value要放在引号里面,单双引号都可以

    五、HTML的注释

      格式如下:

      <!-- this is a comment -->

    六、HTML的样式

    1. 外部样式表

      <head>

      <link rel=”stylesheet” type=”text/css” href=”mystyle.css”>

      </head>

      利用css样式表来改变(类似于渲染吧)网页的外观

      2.内部样式表

      <head>

      <style type="text/css">

      body {text-indent:21.0pt">h1 {color:red}

      p {margin-left: 20px}

      </style>

      </head>

          通过style标签来改变样式,其中还可以使用div标签

      3.内联样式

      <p style=”color:red” ></p>

      使用标签的属性,这里的属性包含css的所有属性

    七、HTML的头部

    1. <title>

      添加html的标题,在浏览器的名称处显示,内容中不显示

      2.<base>

      为浏览器添加默认的链接地址和默认的target

      3.<link>

      定义文档与外部资源的关系,常用于链接样式表(css)

      4.<style>

      定义html在浏览器中的呈现的样式

      5.<meta>

      元数据,不会显示出来,但是浏览器可以读取这些信息

      6.<script>

      定义客户端的脚本

    八.HTML的script

      格式如下:

      <script type="text/javascript">

      <!--

      document.write("<h1>Hello World!</h1>")

      -->

      </script>

      <noscript>Not support JS</noscript>

      其中的注释是为了避免低版本的浏览器不支持脚本语言,支持脚本语言的浏览器会忽略注释,此处的注释必须换行

      <noscript>标签是为了在浏览器不支持脚本语言时显示提示信息

  • 相关阅读:
    深入字节码 -- 计算方法执行时间
    RubyCritic:一款不错的检测代码质量工具
    云告警平台 OneAlert :如何帮助运维工程师做好汇报?
    企业应用程序安全的新「守护神」
    另辟蹊径:云计算给企业带来的4个好处
    年度十佳 DevOps 博客文章(后篇)
    自定义 Lint 规则简介
    静态分析安全测试(SAST)优缺点探析
    css添加了原始滚动条要隐藏滚动条的显示
    jquery实现图片切换
  • 原文地址:https://www.cnblogs.com/songxh-scse/p/5570616.html
Copyright © 2011-2022 走看看