YeeKal

01_html1

YeeKal • •
"#"

HTML

outline

Temp

简介

  • HTML: Hyper Text Markup Language, 超文本标记语言
  • 标记语言是一套标记标签（makeup tag）
  • HTML使用标记标签描述网页
  • 对纯文本概念的理解，符号只是赋予文本以格式，浏览器对标签进行解析
  • 超文本(hypertext),集合文档成一个完整的信息库，完全控制文档在屏幕上的显示以及浏览顺序

元素

  • 开始标签起始，结束标签终止
  • 空元素（empty content）在开始标签中关闭 ，如：<br \>
  • 标签推荐使用小写
  • 默认情况下，HTML 会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后

常用标签

标签 描述
标题，1-6多级标题，自动前后添加空行

链接，href属性中指定地址
创建水平线 （空元素）
注释
图片，src属性定义图片地址（空元素）

链接

超链接的两种方式

  1. 通过使用 href 属性 - 创建指向另一个文档的链接
  2. 通过使用 name 属性 - 创建文档内的书签

语法

使用图像作链接

<a href="/example/html/lastpage.html">
<img border="0" src="/i/eg_buttonnext.gif" />
</a>

target定义链接文档在何处显示

<!-- open in a new page -->
<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>

name 规定锚(anchor),创建页内标签

假如浏览器找不到已定义的命名锚，那么就会定位到文档的顶端。不会有错误发生

<a name="anchor">tips</a>   <!--链接目标文本-->
<a href="#anchor">link</a>  <!-- 链接文本 -->
<!-- 指向其他页面的标签 -->
<a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>

图像

插入普通图象与gif动图没区别

<img src="url" width="15px" height="20px" alt="img">

插入图像背景

<body background="url"> </body>

文本中图像的高低位置

align="bottom/middle/top"

图像浮动

align="left/right"

map创建图像映射

<!-- 指定mapid -->
<img
src="/i/eg_planets.jpg"
border="0" usemap="#planetmap"
alt="Planets" />

<!-- 指定mapid -->
<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>

表格

开始；指定行；
定义元素；border指定边框

<table border="8">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>
<!-- 空单元格-->
<td>&nbsp;</td>

表格标签

表格 描述
table 定义表格
caption 定义表格标题。
th 定义表格的表头。
定义表格的行。
td 定义表格单元。
定义表格的页眉。
定义表格的主体。
定义表格的页脚。
定义用于表格列的属性。
定义表格列的组。

列表

标签 描述
ol 定义有序列表。type="/A/a/I/i"
ul 定义无序列表。type="disc/circle/square"
描述
定义有序列表。
定义无序列表。
定义列表项。

属性

  • 属性以名称/值成对的方式出现：name="value"
  • 名称/值 推荐小写
  • 一般在开始标签中定义
  • 始终为属性值加引号（单引号或双引号）

常见全局属性列表

属性 值 描述
class classname 规定元素的类名（classname）
id id 规定元素的唯一 id
style style_definition 规定元素的行内样式（inline style）
title text 规定元素的额外信息（可在工具提示中显示）

style

HTML4 中引入的新的改变元素样式的方式

<html>
 <!--淘汰了旧的属性：bgcolor,font,align -->
<body style="background-color:green">
  <p style="font-family:verdana;color:red;font-size:20px;text-align:center;">

  </p>

  </body>
  </html>

文本格式化

文本格式化标签列表

标签 描述
b 定义粗体文本。
big 定义大号字。
em 定义着重文字。
i 定义斜体字。
small 定义小号字。
strong 定义加重语气。
sub 定义下标字。
sup 定义上标字。
ins 定义插入字。
del 定义删除字。

计算机输出标签

标签 描述
code 定义计算机代码。
kbd 定义键盘码。
samp 定义计算机代码样本。
tt 定义打字机代码。
var 定义变量。
pre 定义预格式文本。

引用和术语标签

标签 描述
abbr 定义缩写。
acronym 定义首字母缩写。
address 定义地址。 通常以斜体显示,元素前后添加折行
bdo 定义文字方向。
blockquote 定义长的引用。
q 定义短的引用语。
cite 定义引用、引证。
dfm 定义一个定义项目。

类

为相同的类设置相同的样式,div/span

<!-- 在head中定义-->
<style>
.cities {
    background-color:black;
    color:white;
    margin:20px;
    padding:20px;
}
<!-- class属性引用-->
  <div class="cities">
  </div>

CSS样式表

HTML4.0，格式化代码可移出 HTML 文档，移入一个独立的样式表

外部样式表

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

内部样式表

<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>
标签 描述
style 定义样式定义。
link 定义资源引用。
div 定义文档中的节或区域（块级）。
span 定义文档中的行内的小块或区域。

一个示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<div style="opacity:0.5;position:absolute;left:50px;width:300px;height:150px;background-color:#40B3DF"></div>

<div style="font-family:verdana;padding:20px;border-radius:10px;border:10px solid #EE872A;">

<div style="opacity:0.3;position:absolute;left:120px;width:100px;height:200px;background-color:#8AC007"></div>
haha
<h3>Look! Styles and colors</h3>

<div style="letter-spacing:12px;">Manipulate Text</div>

<div style="color:#40B3DF;">Colors
<span style="background-color:#B4009E;color:#ffffff;">Boxes</span>
</div>

<div style="color:#000000;">and more...</div>

</div>
<div style="background-color:#B4009E;opacity:0.5;font-size:20px">
    <p>a new para</p>
    </div>
</body>
</html>

HTML5布局

**HTML5 语义元素 **

header
定义文档或节的页眉
nav
定义导航链接的容器
section
定义文档中的节
article
定义独立的自包含文章
aside
定义内容之外的内容（比如侧栏）
footer
定义文档或节的页脚
details
定义额外的细节
summary
定义 details 元素的标题

HTML响应设计

RWD:Responsive Web Design 改变网页大小，自动改变布局 Bootstrap框架

框架

在同一窗口浏览多个页面

//水平
<frameset rows="25%,50%,25%">
  <frame src="/example/html/frame_a.html">
  <frame src="/example/html/frame_b.html">
  <frame src="/example/html/frame_c.html">
</frameset>

//垂直
<frameset cols="25%,50%,25%">
  <frame src="/example/html/frame_a.html">
  <frame src="/example/html/frame_b.html">
  <frame src="/example/html/frame_c.html">
</frameset>

//格式
<frameset cols/rows="%%%">
    <frame src="<>">
    <frame src="<>">
    <frame src="<>">
    </frameset>

<frmae src="<>" noresize="noresize">    //不可改变框的大小
<noframes> <body> </body> </noframes>   //在<noframes>标签中用body标签

内联框架 在网页指定区域内内显示网页

<iframe src="URL" width="" height=""></iframe>
frameborder="0" 移除边框
name=""         作为链接目标，网页在框架内显示

背景

bgcolor:
<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">

background
<body background="clouds.gif">
<body background="http://www.w3school.com.cn/clouds.gif">
使用style来定义

脚本

Copyright © 2024. All rights reserved.

Made with ❤️ by Yeekal