HTML笔记

最新推荐文章于 2024-01-18 19:00:14 发布

u010067584

最新推荐文章于 2024-01-18 19:00:14 发布

阅读量258

点赞数

本文链接：https://blog.csdn.net/u010067584/article/details/45348267

版权

前言：没想到第二次打开这个博客是这个时候

HTML简介

HTML：Hyper Text Markup Language
标记语言，不是编程语言
标记标签
HTML使用标记标签来描述网页

笔记

标题：<h1></h1>，数字表示字符大小，<hr/>创见水平线，用于分割内容
段落：<p></p>
链接：<a href = "http://www.hupu.com">虎扑</a>，中间的描述可以点击从而进入网页，新窗口：target = "_blank"
- 命名锚：<a name=“label”>锚（显示在页面上的文本）</a>。
- <a href= "#c4">点我跳到隔壁</a>→<a name = "c4">我就是隔壁</a>
图像：<img src="???.jpg" width = "100" height = "80">
HTML元素指从开始标签(start tag)到结束标签(end tag)的所有代码
HTML对大小写不敏感，但是XML强制使用小写，推荐都用小写
属性为HTML提供附加信息name = "value"，<a href = "http://...">This is a link</a>中的href = ""就是属性
注释：
换行：<br/>
文本格式化：
- <b>粗体
- <big>大号字
- <em>着重文字
- <i>斜体字
- <small>小号字
- <strong>加重语气
- <sub>下标字
- <sup>上标字
- <ins>插入字
- <del>删除字
计算机输出标签：
- <code>计算机代码
- <kbd>键盘码
- <samp>计算机代码样本
- <tt>打字机代码
- <var>变量
- <pre>预览格式文本

引用、术语

<abbr>定义缩写

The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.

<acronym>首字母缩写

<acronym title="World Wide Web">WWW</acronym>

<address>地址

<address>
Written by <a href="mailto:webmaster@example.com">Donald Duck</a>.<br> 
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

<bdo>文字方向

      
      
       
       <bdo dir="rtl">Here is some text</bdo>

<blockquote>长引用
<q>短引用
<cite>引用，引证
<dfn>定义一个定义项目

HTML样式
- 外部样式表，样式需要应用到很多页面的时候，引用一个外部文件，改变这个文件内容来改变页面样式
```
<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>
```
- 内联样式，个别元素需要特别样式，在相关标签中编辑属性
```
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>
```
图像
- <img src = "url"/>
- 替换文本属性，图像显示不出来就显示文字<img src = "boat.gif" alt = "a boat"/>
- 背景图像，<body background = "url">
- 排列图像，<img src = "url" align = "top"/"middle"/"bottom"/>，默认是bottom
- 图像在左还是右，<img src = "url" align = "left"/"right"/>
- 调整图像尺寸，<img src = "url" width = "?" height = "?"/>
- 图像链接，<a href = "url"><img src = "url"/></a>
- 图像映射，
- <html>
  <body>
  
  <p>请点击图像上的星球，把它们放大。</p>
  
  <img
  src="/i/eg_planets.jpg"
  border="0" usemap="#planetmap"
  alt="Planets" />
  
  <map name="planetmap" id="planetmap">
  
  <area
  shape="circle"
  coords="180,139,14"
  href ="/example/html/venus.html"
  target ="_blank"
  alt="Venus" />
  
  <area
  shape="circle"
  coords="129,161,10"
  href ="/example/html/mercur.html"
  target ="_blank"
  alt="Mercury" />
  
  <area
  shape="rect"
  coords="0,0,110,260"
  href ="/example/html/sun.html"
  target ="_blank"
  alt="Sun" />
  
  </map>
  
  <p><b>注释：</b>img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性（根据浏览器），所以我们同时向 map 元素添加了 "id" 和 "name" 属性。</p>
  
  </body>
  </html>
- 图像转为图像映射，<a href = "url"><img src = "url" ismap/></a>