2019-4-25 html学习笔记

一.概念

文本   用于储存和记录文字信息的载体

html  超文本标记语言(本质就是给文本增加语义 如<h1></h1>就是给文字添加一级标题的语义)

注:互联网三大基石 有

html 标记数据

http 定义数据怎么传输 传输协议

url 数据地址 http://ip地址:端口号/资源路径

二.版本

html 5

html 4.01

三.语法

 

  • HTML 标签是由尖括号包围的关键词,比如 <html>
  • HTML 标签通常是成对出现的,比如 <b> 和 </b>
  • 标签对中的第一个标签是开始标签,第二个标签是结束标签
  • 开始和结束标签也被称为开放标签闭合标签

注意:Web 浏览器的作用是读取 HTML 文档,并以网页的形式显示出它们。浏览器不会显示 HTML 标签,而是使用标签来解释页面的内容

四. HTML文档结构

<!DOCTYPE>

<html>

<head></head>

<body></body>

</html>

1.<!DOCTYPE> 声明

<!DOCTYPE>声明有助于浏览器中正确显示网页。

网络上有很多不同的文件,如果能够正确声明HTML的版本,浏览器就能正确显示网页内容。

H5 声明:<!DOCTYPE html>

H4声明  :<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">

XH声明  :<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2.<html></html>

标签告知浏览器这是一个 HTML 文档。

属性:manifest:   url  在此url上定义该文档的缓存信息

   xmlns    :http://www.w3.org/1999/xhtml   

        规定 XML 的 namespace(属性命名空间) 属性(如果您需要您的内容符合 XHTML,则使用这个属性。)

      注意:该属性在xhtml中必须,在html中可要可不要

五. <head>标签结构

<title> 标签定义文档的标题,在所有 HTML 文档中是必需的。

<style> 标签定义 HTML 文档的样式信息。每个 HTML 文档能包含多个 <style> 标签。

  <base>标签为页面上的所有的相对链接规定默认 URL 或默认目标。在一个文档中,最多能使用一个 <base> 元素。<base> 标签必须      位于 <head> 元素内部。

      请把 <base> 标签排在 <head> 元素中第一个元素的位置,这样 head 区域中其他元素就可以使用 <base> 元素中的信息了。

      注释:如果使用了 <base> 标签,则必须具备 href 属性或者 target 属性或者两个属性都具备。

<link>标签定义文档与外部资源的关系。最常见的用途是链接样式表。

<meta>元数据(Metadata)是数据的数据信息。

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

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

                    JavaScript 通常用于图像操作、表单验证以及动态内容更改。

      如果使用 "src" 属性,则 <script> 元素必须是空的。

<noscript>元素用来定义在脚本未被执行时的替代内容(文本)。此标签可被用于可识别 <noscript> 标签但无法支持其中的脚本的浏览器。

1.<meta>

<meta charset="UTF-8"> 定义该文档的编码格式

<meta name="description" content="免费在线教程">  定义web页面描述

<meta name="keywords" content="HTML,CSS,XML,JavaScript">  定义文档关键词,用于搜索引擎

<meta name="author" content="runoob">  定义页面作者:

<meta http-equiv="refresh" content="30 http://www.baidu.com">进入该网页后 30秒刷新 刷新地址为http://www.baidu.com

<meta http-equiv="refresh" content="30 http://www.baidu.com">进入该网页后 30秒原地刷新

2.<style>(如需链接外部样式表,请使用 <link> 标签)

  属性   media 表规定不同的媒体类型。

       scoped 如果使用该属性,则样式仅仅应用到 style 元素的父元素及其子元素。

3. base

       属性    href   规定页面中所有相对链接的基准 URL。

          target  规定页面中所有的超链接和表单在何处打开。该属性会被每个链接中的 target 属性覆盖。

        _blank  在新窗口中打开被链接文档。

        _parent  在父框架集中打开被链接文档。

        _self  默认。在相同的框架中打开被链接文档。

        _top   在整个窗口中打开被链接文档。

        framename 在指定的框架中打开被链接文档。

4.<link>  标签定义文档与外部资源的关系。  

href  定义被链接文档的位置。

hreflang 定义被链接文档中文本的语言。

media 规定被链接文档将显示在什么设备上。

rel 必需。定义当前文档与被链接文档之间的关系。

  stylesheet 要导入的样式表的 URL。

  5.<script>

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

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

属性 :

 async :规定异步执行脚本(仅适用于外部脚本)。

charset:规定在脚本中使用的字符编码(仅适用于外部脚本)。

defer :规定当页面已完成解析后,执行脚本(仅适用于外部脚本)。

 src:规定外部脚本的 URL。

type:规定脚本的 MIME 类型。

如果 async="async":脚本相对于页面的其余部分异步地执行(当页面继续进行解析时,脚本将被执行)

如果不使用 async 且 defer="defer":脚本将在页面完成解析时执行

如果既不使用 async 也不使用 defer:在浏览器继续解析页面之前,立即读取并执行脚本

六 . <body>内的常用标签

<h1> - <h6>  标签被用来定义 HTML 标题。

<hr>  标签定义 HTML 页面中的主题变化(比如话题的转移),并显示为一条水平线。

属性: align  :left center right  (h5不支持)

   noshade :  规定 <hr> 元素的颜色呈现为纯色。

        noshade  (h5不支持)

   size   : 规定 <hr> 元素的高度.

   width:规定 <hr> 元素的宽度。

  <i> 定义与文本中其余部分不同的部分,并把这部分文本呈现为斜体文本。

    其他语义

<em> (被强调的文本)

<strong> (重要的文本)

<mark> (被标记的/高亮显示的文本)

<cite> (作品的标题)

<dfn> (一个定义项目)

  <sub> 下标

  <sup> 上标

  <pre> 显示文本原本格式

  <img> 标签定义 HTML 页面中的图像。

    属性: alt :图片的替代文本

       height :图长

       width :图宽

       src :图片的地址

table标签结构

<table>

<caption></caption>

<colgroup>

<col>

</colgroup>

<thead>

<tr><th></th></tr>

<thead>

<tbody>

<tr><td colspan>列合并</td><td rowspan>行合并</td></tr>

</tbody>

<tfoot>

  <tr><td></td></tr>

</tfoot>

</table>

 

 

    

 

 

 

 

 

 

 

转载于:https://www.cnblogs.com/w410782823/p/10767916.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值