HTML学习

一.HTML简介

<!DOCTYPE html>    <!--声明为HTML5文档,html不区分大小写-->
<html>           <!--HTML元素的根元素-->
    <head>       <!--包含了文档的元(meta)数据-->
        <meta charset = "UTF-8">  <!--声明为中文编码,避免中文乱码的情况-->
        <title> test标题</title>  <!--描述了文档的标题-->
    </head>
    <body>              <!--包含了可见的页面内容-->
        <h1>我的第一个标题</h1>  <!--定义了一个大标题-->
        <p>我的第一个段落</p>  <!--定义一个段落-->
    </body>
</html>

二.HTML编辑器

可以直接使用sublime或者notepad,新建文件写html代码即可,写后另保存为以.html或者.htm为后缀的文件,最后在浏览器种选择“文件”菜单的“打开文件”命令,或者直接在文件夹中双击HTML文件即可运行。


1.HTML基础

(1)HTML标题

HTML的标题是通过<h1>-<h6>标签来定义的

<h1>first title</h1>
<h2>second title</h2>
<h3>third title</h3>

(2)HTML段落

<p>first paragraph</p>
<p>second paragraph</p>

(3)HTML链接

HTML链接是通过标签<a>来定义的

<a href="http://www.runoob.com">这是一个链接</a>

(4)HTML图像

HTML图像是通过标签<img>来定义的

<img src="/images/logo.png" width="258" height="39" />

三.HTML元素

HTML文档由HTML元素定义

开始标签元素内容结束标签
《p》这是一个段落《/p》
《a href=”default.htm”》这是一个链接《/a》
《br》换行

我真的不知道怎么能把<p>这样的打到表格里面去

HTML元素以开始标签起始,以结束标签终止,元素的内容是开始标签与结束标签之间的内容,有的HTML元素有空内容,例如<br>,空元素在开始标签中进行关闭,也就是以开始标签的结束而结束。
注意:建议使用小写标签


四.HTML属性

HTML元素可以设置属性,属性可以在元素中添加附加信息,一般描述于开始标签,并总是以名称/值对的形式出现,比如:name = “value”

<a href="http://www.runoob.com">这是一个链接</a> <!--链接地址在href属性中指定-->

HTML属性常用引用属性值,属性值被包含在双引号内,并使用小写属性。常用属性有以下几种:

  • class:为html元素定义一个或者多个类名,class = “”,引号内可以添加多个class属性(classname)(类名从样式文件引入)
  • id:定义元素的唯一id,引号中只能填写一个,多个无效
  • style:规定元素的行内样式(inline style)
  • title:描述了元素的额外信息(作为工具条使用)

五.HTML标题

标题是通过<h1>-<h6>标签进行定义的,<h1>是最大的标题,<h6>是最小的标题
注:浏览器会在标题后自动添加空行。

HTML水平线

<hr>标签在HTML页面中创建水平线

HTML注释

<!--这是一个注释-->

HTML提示

如果要查看网页的源码,右击查看源文件或者查看页面源代码就可以。

六.HTML段落

<p>这是一个段落</p>
<p>这是另一个段落</p>

HTML折行

如果希望咋不产生一个新段落的情况下进行换行(新的一行),要使用<br>

HTML输出

我们无法确定HTML被显示出来的确切效果是什么样的,屏幕的大小以及窗口的调整都有可能导致不同的结果,而且我们也无法通过在HTML代码中添加额外的空格或者换行来改变输出的结果,在html中所有连续的空格或者空行都会被算作一个空格。

七.HTML文本格式化

1.文本格式化

在HTML文件中对文本进行格式化

<b>这个文本是加粗的</b>
<strong>这个文本是加粗的</strong>
<big>这个文本的的字体被放大了</big>
<em>这个文本是斜体的</em>
<i>这个文本是斜体的</i>
<small>这个文本是缩小的</small>
<br>
这个文本包含<sub>下标</sub>
<br>
这个文本包含<sup>上标</sup>

注:<b>``<i>只是简单的将文本加粗和变成斜体,而<strong>``<em>有强调的作用(如果使用网页阅读器阅读网页,strong会重读,b不会),例如strong是为了未来建设语义网而诞生的,因为html是负责显示的标记,不能表示语义,而strong在语义上走出了第一步。

2.预格式文本

如何使用pre标签对空格和空行进行控制

<pre>
此案例演示如何使用 pre 标签
对空行和    空格
进行控制

3.“计算机输出”标签

这些标签用于显示计算机/编程代码

<code>计算机输出</code>
<br />
<kbd>键盘输入</kbd>
<br />
<tt>打字机文本</tt>
<br />
<samp>计算机代码样本</samp>
<br />
<var>计算机变量</var>
<br />

4.地址的写法

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

输出就是标准的地址格式

5.缩写和首字母缩写

在某些浏览器中,当把鼠标移到缩略词上的时候,title可用于展示出完整的表达式

<abbr title="etcetera">etc.</abbr>
<br />
<acronym title="World Wide Web">WWW</acronym>

注:IE5中acronym元素有效,Netspace6.2中abbr和acronym都有效

6.改变文字显示方向

将输入的文字由右到左显示

<p>该段落文字从左到右显示。</p>  
<p><bdo dir="rtl">该段落文字从右到左显示。</bdo></p>

7.引用(我没觉得有啥用)

定义短的引用语,定义引用、引证的时候用<cite>

<p>WWF's goal is to: 
<q>Build a future where people live in harmony with nature.</q>
We hope they succeed.</p>

<q></q>中间是引用的内容,输出时会自动加上引号

8.删除线和下划线

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

八.HTML 链接

超链接可以是一个字一个词一组词,也可以是一幅图像,可以点击这些内容来跳转到新的文档或者当前文档的某个部分。当把鼠标移到网页中的某个链接上的时候,箭头会变为一只小手。在标签中使用了herf属性来描述链接的地址。
默认情况下,链接将以以下形式出现在浏览器中:

  • 一个没有被访问过的链接将显示为蓝色字体并带有下划线。
  • 访问过的链接显示为紫色并且带有下划线
  • 单击链接时,链接显示为红色并且带有下划线。
    注:如果为这些超链接设置了CSS样式,展示样式会根据CSS的设定显示。
    HTML链接的语法如下
<a href = "url">链接文本</a> 

url是链接的目标,链接文本是会在网站中显示的文本,点击文本可以跳转到url,注意使用URL的时候应该始终将正斜杠添加到子文件夹(也就是在最后加上斜杆)

1.target属性

使用target属性,可以定义被链接的文档在何处显示

<a href = "http://www.baidu.com/" target = "_blank">访问百度</a>

会在新窗口中打开链接内容

<p>跳出框架?</p> 
<a href="http://www.runoob.com/" target="_blank">点击这里!</a> 

会在当前窗口打开链接内容

2.id属性

id属性可以用于创建一个HTML文档书签标记(书签在HTML文档中是不显示的,所以对于读者来说是隐藏的),

<a id = "tips">有用的提示部分</a>

这个应该是可以用来跳转到本页面的某部分,但是样例我还没有搞明白,哭
我造了我造了

<a href = "#C4">查看C4位置的东西</a>
<a id = "C4">我是C4呀</a>

这样点击查看C4位置的东西就会跳转到C4位置了啊

3.图片链接

<p>创建图片链接:
<a href="http://www.runoob.com/html/html-tutorial.html">
<img  border="10" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p>

<p>无边框的图片链接:
<a href="http://www.runoob.com/html/html-tutorial.html">
<img border="0" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p>

还有待学习

4.点击链接发送邮件

<a href="mailto:liyu9691@qq.com?subject=这是邮件的主题&body=这是邮件的内容" rel="nofollow">发送邮件</a>

调用系统默认的邮件程序发送给liyu9691@qq.com,收件人那里已经填好了邮箱地址,如果要抄送要使用关键字cc,密送使用关键字bcc。第一个参数也就是邮件地址后面的分隔符用,其他参数的分隔符用&,多个邮件的地址用隔开

<a href="liyu9691@qq.com?cc=someone@163.com&bcc=somebody@163.com" rel="nofollow">发送邮件</a>

九.HTML<head>

HTML<head>元素包含了所有的头部标签元素,在<head>中可以插入脚本(scripts),样式文件(CSS),以及各种meta信息。

1.HTML<title>元素

<title>标签定义了不同文档的标题,他在HTML/XHTML文档中是必须的。
- <title>标签定义了浏览器工具栏的标题
- 当网页添加到收藏夹时,显示在收藏夹中的标题
- 显示在搜索引擎结果页面的标题

2.HTML<base>元素

<base>标签描述了基本联机的链接地址,也就是HTML文档中所有未定义链接标签的默认链接。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<base href="http://www.runoob.com/images/" target="_blank">
</head>

<body>
<img src="logo.png"> - 注意这里我们设置了图片的相对地址。能正常显示是因为我们在 head 部分设置了 base 标签,该标签指定了页面上所有链接的默认 URL,所以该图片的访问地址为 "http://www.runoob.com/images/logo.png"
<br><br>
<a href="http://www.runoob.com">菜鸟教程</a> - 注意这个链接会在新窗口打开,即便它没有 target="_blank" 属性。因为在 base 标签里我们已经设置了 target 属性的值为 "_blank"。

</body>
</html>

3.HTML<link>元素

<link>定义了文档与外部资源之间的关系,通常用来链接到样式表。

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

4.HTML<style>元素

<style>元素定义了HTML文档的样式文件引用地址。也可以直接在其中添加样式来渲染HTML文档

<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>

5.HTML<meta>元素

meta标签描述了一些基本的元数据,元数据不显示在页面上,但会被浏览器解析。meta元素通常用来指定网页的描述、关键词、文件的最后修改时间、作者和其他元数据,它可以使用于浏览器(如何显示内容或者重新加载页面),搜索引擎(关键词),或者其他web服务。

  1. 为搜索引擎定义关键词

    <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
  2. 为网页定义描述内容

    <meta name="keywords" content="HTML,CSS,XML.XHTML,JavaScript">
  3. 定义网页作者

    <meta name="author" content="liyu">
  4. 每三十秒钟刷新当前页面

    <meta http-equiv="refresh" content="30">

    6.HTML<scrip>元素

    用于加载脚本文件,例如JavaScript

十.HTML样式CSS

CSS是在HTML4开始使用的,是为了更好的渲染HTML元素而引入的。
CSS可以通过以下方式添加到HTML中:

  • 内联样式:在HTML元素中使用“style”属性
  • 内部样式表:在HTML文档头部head区域使用<style>元素来包含CSS
  • 外部引用:使用外部CSS文件

1.内联样式

  1. 背景颜色
    background-color定义一个元素的背景颜色。

    <body style = "background-color:yellow;">
    <h2 style = "background-color:red">这是一个标题</h2>
    </body>
  2. 字体,字体颜色,字体大小
    分别使用font-family(字体),color(颜色),font-size(字体大小)属性来定义字体的样式

    <h1 style = "font-family:verdana:">一个标题</p>
    <p style="font-famliy:arial;color:red;font-size:20px;">一个段落</p>
  3. 文本对齐方式
    使用text-align属性来定义文本的水平与垂直对齐方式

    <h1 style="tet-align:center;">居中对齐的标题</h1>

2.内联样式表

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

<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

3.外部样式表

当样式需要被应用到许多页面的时候,外部样式表是理想的选择。使用外部样式表可以通过更改一个文件来改变整个站点的外观。

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

十一.HTML图像

在HTML中用<img>标签定义图像,<img>是空标签,只包含属性,没有闭合标签。要在页面上显示图像需要使用属性src,src指“source”,属性的值是图像的URL地址。

<img src = "url" alt = "some_text">

1. Alt属性
alt属性用来为图像定义一串可替换的文本。在浏览器无法载入图像时,替换文本告诉读者他们失去的信息。此时浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯,这样有助于更好的显示信息,并且对于那些使用纯文本浏览器的人来说是非常有用的。

<img src="boat.gif" alt = "Big Boat">

2. 设置图像的高度与宽度
height(高度)和width(宽度)属性用于设置图像的高度和宽度,默认单位为像素,最好指定高度和宽度,这样页面加载的时候会保留指定的大小,如果没有指定的加载的时候肯能会破坏HTML页面的整体布局。

<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">

3. 基本的注意事项:有用的提示
- 尽量减少图片的使用,减少网页的加载时间
- 加载页面的时候一定要插入页面图像的路径,否则显示出来的是一个破碎的图片。
4. 更多实例
在文字中排列图像

<h4>默认对齐的图像 (align="bottom"):</h4>
<p>这是一些文本。 <img src="smiley.gif" alt="Smiley face" width="32" height="32"> 这是一些文本。</p>

<h4>图片使用 align="middle":</h4>
<p>这是一些文本。 <img src="smiley.gif" alt="Smiley face" align="middle" width="32" height="32">这是一些文本。</p>

<h4>图片使用 align="top":</h4>
<p>这是一些文本。 <img src="smiley.gif" alt="Smiley face" align="top" width="32" height="32">这是一些文本。</p>

HTML4中align属性已经废弃,HTML5不支持该属性,可以使用CSS代替。

创建图像映射

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
  • <map>定义图像地图
  • <area>定义图像地图中的可点击区域,其中shape指的是点击区域的形状,coords指的是链接区域在图片中的坐标(像素为单位)
    1. 矩形:(左上角坐标为(x1,y1),右下角顶点坐标为(x2,y2))
 <area shape="rect" coords="x1,y1,x2,y2" href=url>
  1. 圆形:(圆心坐标为(X1,y1),半径为r)
<area shape="circle" coords="x1,y1,r" href=url> 
  1. 多边形:(各顶点坐标依次为(x1,y1)、(x2,y2)、(x3,y3) ……)
 <area shape="poly" coords="x1,y1,x2,y2 ......" href=url>

HTML表格

表格由<table>标签来定义。每个表格都有若干行,由<tr>标签来定义,每行被分成若干单元格,由<td>标签来定义,字母td指表格数据(table data),就是数据单元格的内容。数据单元格中可以包含文本、图片、列表、段落、表单、水平线、表格等等。

<table border="1">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

border属性表示边框,<th>表示表格表头,大多数浏览器会把表头显示为粗体居中的文本。

其他属性:

  1. 表格标题
<caption>这里是标题</caption>
  1. 跨行或者跨列的单元格
<h4>单元格跨两格:</h4>
<table border="1">
<tr>
  <th>Name</th>
  <th colspan="2">Telephone</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>
<h4>单元格跨两列:</h4>
<table border="1">
<tr>
  <th>First Name:</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th rowspan="2">Telephone:</th>
  <td>555 77 854</td>
</tr>
<tr>
  <td>555 77 855</td>
</tr>
</table>
  1. 单元格边距(单元格中内容与其边框之间的空白)
<table border="1" cellpadding="10">
  1. 单元格间距(单元格之间的距离)
<table border="1" cellsapcing="10">

十三.HTML列表

HTML支持有序和无序两种列表

1.无序列表

无序列表是一个项目的列表,使用粗体原点进行标记

<ul>
<li>COFFEE</li>
<li>MILK</li>
</ul>

2.有序列表

有序列表也是一列项目,但是它使用数字进行标记。

<ol>
<li>COFFEE</li>
<li>MILK</li>
</ol>

3.自定义列表

不仅仅是一列项目,而且是项目和注释的组合

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

<dt>是自定义列表项目,<dd>是自定义列表项目的描述

十四.HTML<div><span>

HTML可以通过<div><span>将元素结合起来
1. HTML块级元素
块级元素在浏览器中显示的时候会以新行来开始和结束,例如<h1>,<p>,<ul>,<table>
2. 内联元素
在显示的时候通常不会以新行开始,例如<b>,<td>,<a>,<img>
3. HTML<div>元素
HTML<div>元素是块级元素,浏览器会在其前后显示折行,他是用来组合其他的HTML元素,没有特定的含义,有两种使用方式,一种是和CSS一同使用,用于对大的内容块设置样式属性,另一个常见的用途是文档布局,它取代了表格定义的老式方法
4. HTML<span>元素
HTML<span>元素是内联元素,可以用作文本的容器,也没有特殊的含义,当和CSS一起使用时,<span>元素可用于不分文本设置样式属性。

十五.HTML表单和输入

HTML表单用于收集不同类型的用户输入
表单元素允许用户在表单中输入内容,比如:文本域(textarea),下拉列表,单选框(radio-buttons)、复选框(checkboxes)等等

<form>
input元素
</form>

HTML表单输入元素

多数情况下被用到的表单标签是输入标签<input>,输入类型有属性type来定义,常用的属性有以下几种:
1. 文本域(text fields)

<form>
First name:<input type = "text" name = "firstname"><br>
Last name:<input type = "text" name = "lastname">
</form>
  1. 密码字段
<form>
Password:<input type="password" name="pwd">
</form>
  1. 单选按钮(radio buttons)
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
  1. 复选框(checkboxes)
<form>
<input type="checkbox" name="vehicle" value="bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="car">I have a car
</form>
  1. 提交按钮(submit button)
    当用户点击确认按钮的时候,表单的内容会被传送到另一个文件,表单的动作属性定义了目的文件的文件名。
<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" anme="user">
<input type="submit" value="Submit">
</form>

更多实例

1.简单的下拉列表

<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

2.预选下拉列表

<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

十六.HTML框架

通过使用框架在一个浏览器窗口显示不止一个页面。

<iframe src="demo_iframe.htm" width="200" height="200" frameborder=“0”></iframe>

src属性是指指向的网页,height和width属性用来定义iframe标签的高度和宽度,默认以像素为单位,也可指定其按照比例显示,例如“80%”,frameborder属性用来定义iframe是否显示边框,设置属性值为“0”的时候移除其边框。

十七.HTML颜色

HTML颜色由一个十六进制的符号来定义,这个符号由红色、绿色和蓝色的值组成(RGB)。每种颜色的最小值是0(#00),最大值是255(#FF)
相对于使用如果不(255,255,0),使用rgba(255,255,0,0.5)可以设置颜色透明度。0.5表示颜色的透明度为0.5,范围为0-1。
需要用的时候回网站找http://www.runoob.com/html/html-colors.html

HTML颜色名

目前所有浏览器都支持的颜色,包括十七个标准颜色再加124。
具体见http://www.runoob.com/html/html-colornames.html

十八.HTML字符实体

HTML中的预留字符必须被替换为字符实体。一些在键盘上找不到的字符也可以使用字符实体来替换。
常用字符实体见
http://www.runoob.com/html/html-entities.html

实用版HTML速查列表

http://www.runoob.com/html/html-quicklist.html

我就先学到这吧,毕设搞完了可能会回来完善下,祝愿我自己毕设一切顺利。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值