文档章节

HTML基础学习笔记

mrmusic
 mrmusic
发布于 2016/04/02 21:41
字数 1881
阅读 62
收藏 6

1、页面

 1、文件结构

<html>......</html>

<head>......</head>

<body>.......</body>

<HTML>
<HEAD>
     <title>, <base>, <link>, <isindex>, <meta>
</HEAD>
<BODY>
  <h1>正文</h1>
</BODY>
</HTML>
2、语言字符集信息

<meta http-equiv="Content-Type" content="text/html;charset=#">

基本上所有的网站的网页都有,现在一般都是UTF-8,和GBK2312

3、背景色彩和文字色彩

<body  bgcolor=#   text=#   link=#  alink=#  vlink=#>

  • bgcolor --- 背景色彩

  • text --- 非可链接文字的色彩

  • link --- 可链接文字的色彩

  • alink --- 正被点击的可链接文字的色彩

  • vlink --- 已经点击(访问)过的可链接文字的色彩

(颜色RGB16进制)

背景图象 <body background="image-URL">

4、页面空白(试了貌似不管用)

页面左边的空白 <body leftmargin=#>

页面上方的空白(天头) <body topmargin=#> #=margin amount

5、连接

<a href="#"></a> 有下划线的连接

< name="#"></a>无下划线不像链接

默认的是在原来的窗口打开

 target="Window_Name" (打开一个新的窗口属性)

下面百度是在新窗口打开

<a href="  target="Window_Name">百度</a>
6、标尺线

<hr>

标尺线的高度:<hr size=#> 

例如:<hr size=10>

标尺线的宽度:<hr width=#>

例如:<hr width=50><hr width=50%> 

标尺线的位置:<hr align=#> #=left, right

例如:<hr width=50% align=left>      <hr width=50% align=right> 

标尺线的颜色:<hr color=#>

例如:<hr color=#000000 >

<!doctype html>
<html>
 <head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  <title>Document</title>
 </head>
 <body  bgcolor=#ff0033 text=#00ff99 link=#000099 alink=#330099  vlink=##66cc33>
  <h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<a href="http://www.baidu.com">百度</a><br/>
<a name="http://www.baidu.com">百度1</a>
<hr>
<hr size=20>
<hr width=50>
<hr width=50%>
<hr width=50%>
<hr width=50%>
<hr noshade>
<hr color=#000000 >
 </body>
</html>


2、字体

1、标题字体

字体由大到小

<h1></h1>

<h2></h2>

<h3></h3>

<h4></h4>

<h5></h5>

<h6></h6>


<hn></hn>这些标记显示黑体字,自动插入空行

2、字体大小

<font size=#>....</font>#=1,2,3,4,5,6,7

3、物理字体

加粗:<b>....</b>

斜体:<i>.....</i>

下划线:<u>....</u>

打字机文本:<tt>...</tt>

上标注:<sup></sup>

下标注:<sub></sub>

删除文本定义: <s></s>   <strike></strike>

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
 </head>
 <body>
  <b>加粗</b><hr>
  <i>斜体</i><hr/>
  <u>下划线</u><hr/>
  <tt>打字机文本</tt><hr/>
  <sup>上标注</sup><hr>
  <sub>下标注</sub><hr>
  <s>可定义删除文本</s><hr>
  <strike>可定义删除文本</strike><hr>
 </body>
</html>
4、逻辑字体

强调字体倾斜:<em></em>

强调字体加粗:<strong></strong>

用于表示计算机源代码或者其他机器可以阅读的文本内容:<code></code>

 短语标签:<samp></samp>

键盘文本:<kbd></kdd>

变量的名称<var></var>

对特殊术语或短语的定义<dfn></dfn>

注释作用:<cite><cite>

小型文本:<small></small>

大字号:<big></big>

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
 </head>
 <body>
  <b>加粗</b><hr>
  <i>斜体</i><hr/>
  <u>下划线</u><hr/>
  <tt>打字机文本</tt><hr/>
  <sup>上标注</sup><hr>
  <sub>下标注</sub><hr>
  <s>可定义删除文本</s><hr>
  <strike>可定义删除文本</strike><hr>
  <h1>逻辑字体</h1>
  <em>强调字体倾斜</em><hr>
  <strong>强调字体加粗</strong><hr>
  <code>用于表示计算机源代码或者其他机器可以阅读的文本内容</code><hr>
  <samp>短语标签</samp><hr>
  <kdd>键盘文本</kdd><hr>
  <var>变量的名称</var><hr>
  <dfn>对特殊术语或短语的定义</dfn><hr>
  <cite>注释作用</cite><hr>
  <small>小型文本</small><hr>
  <big>大字号</big>
 </body>
</html>

物理风格直接指定字体的“样式”(如粗、斜、下划线);

逻辑风格则是指定文本的“作用”(如示例文字、缩小文字)。

就像去餐馆吃饭,点菜的时候,A告诉炒菜的师傅“炒得多一点”,这是物理风格,直接指定样式;B告诉炒菜的师傅“炒得辣一点”,这是逻辑风格,指定作用。

5、字体颜色

<font color=#>.....</font>

6、客户端字体

<font face=""></font>

7、字符实体

&amp;           &
&lt;            <
&gt;            >
&quot;          "

3、文字布局

1、行的控制

空行:<p>

换行:<br>

不换行<nobr>

2、文字的对齐

  <hn align=#>...</hn>     ( <h1><h2>......)
    <p align=#>...</p> #=left, center, right

3、文字的分区显示

<div align=#>...</div>            #=left, center,  right

4、列表

无序列表:<ul><li>.........</ul>

有序类表:<ol><li>..........</ol>

定义列表:<dl><dt>......<dd>.....</dl>

定制表中的标记:<li type=#> #=disk,circle,square

定制有序列表表中的序号:<li type=#> #=A,a,I,i,1

5、预格式化文本

<pre>.........</pre>

<listing>.....</listing>

<xmp>......</xmp>

6、块引用:

<blockquote>.......</blockquote>

7、闪烁

<blink>......</blink>

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
 </head>
 <body>
<h1>中间</h1>
<div>大家愚人节快乐</div>
<div>大家愚人节快乐</div>
<div>大家愚人节快乐</div>
<blink>块引用</blink>
<div>
Her Song:
<blockquote>
When I was young, I listened to the radio 
waiting for my favorite songs....
</blockquote>
</div>
<h1>定制列表元素</h1>
<ul>
<li type=disc>ONE
<li type=circle>TWO
<li type=square>THREE
</ul>
<h1>定制列表</h1
<dl>
<dt>Today
<dd>Today is yesterday.
<dt>Tomorrow
<dd>Tomorrow is today.
</dl>
<h1>有序列表</h1>
<ol>
<li>Today
<li>Tommorow
</ol>
<h1>无序列表</h1
<ul>
<li>Today
<li>Tommorow
</ul>
 </body>
</html>

4、图像

1、插入图像基本语法:

<img  src=#   alt=#>src对应图片的地址,alt图片的提示内容

2、图像和文字的对齐

<img align=#>#=top,middle,bottom 分别为上、中、下

3、边框

<img border=# > #=value

5、表格

1、基本语法:

<table>...</table> - 定义表格
<tr> - 定义表行
<th> - 定义表头
<td> - 定义表元(表格的具体数据)

默认的不带边框,

带边框的表格:<table border>

2、跨多行,多列的表元

跨多列的表元 <th colspan=#>

跨多行的表元 <th rowspan=#>

3、表格尺寸设置
边框尺寸设置:<table border=#>

表格本身尺寸设置:<table border width=# height=#>

表元间隙设置:<table border cellspacing=#>

表元内部空白设置:<table border cellpadding=#>

4、表格内文字的对齐和布局

<tr align=#>

<th align=#> #=left, center, right

<td align=#>

5、表格在页面的对齐

<table align=#>#=left right center

6、表格标题

<caption align=#>....</caption>

7、表格色彩

<th bgcolor=#>

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>HTML</title>
 </head>
 <body>
  <table border>
   <caption >标题</caption>
  <tr>    
  <th bgcolor=ffaa00>HTML</th>
  <th bgcolor=#3300cc>MySql</th>
  <th rowspan=2 >Css</th>
  </tr>
  <tr bgcolor=#ffffff><td>A</td><td>B</td>  
  </tr>
  </table>
 </body>
</html>
8、表格中分隔线的显示

显示所有的分隔线:<table rules=all>

只显示组与组之间的分隔线:<table rules=groups>

只显示行与行之间的分隔线:<table rules=rows>

只显示列与列之间的分隔线 : <table rules=cols>

不显示任何分隔线:<table rules=none>

6、表单

1、基本语法

<from action="url" method="#">(提交方法一般都是POST或者GET)

(enctype=”multipart/form-data”提交文件)

.........

.........

<input type=submit value="提交">

</from>

一般的数据提交方式都是通过表单来完成的

下面试表单中提供给用户的输入形式

<input type=* ,name=**>

文字输入:*=text

密码输入:*=passwd

复选框:*=checkbox (默认选中 checked="checked')

单选框:*=redio

图像坐标:*=image

<input type=image src=url>

隐藏表单元素:*=hidden

文件:type=file

列表选择框:<select ><option></option></select>

文本区域:<textarea name=""></textarea>

7、移动的文字

1、基本语法

<marquee>.....</marquee>

2、文字移动的属性设置

<marquee direction=#>.....</marquee> #=left,right(移动的方向,向右,向左)

3、方式:

<marquee behavior=#>.....</marquee>

#=scroll(一圈一圈绕着走)

#=slide(只走一次)

#=alternate (来回走)

4、循环

<marquee loop=#>.....</marquee>  #=次数

5、速度

<marquee scrollamount=#>.....</marquee>  #=速度

6、延时

<marquee scrolldelay=#>.....</marquee>  #=时间

8、多媒体内容

<embed src=#>










© 著作权归作者所有

mrmusic
粉丝 11
博文 34
码字总数 23901
作品 0
数据库管理员
私信 提问
HTML 学习笔记(一)。--- 百度前端技术学院。作者:李杨帅

本人是后端。但前端水平基础差,在机缘巧合的情况下发现了百度的前端技术学院。那么就从学习一些基础的东西,同时也记录下同为初学者的笔记。 首先有如下几个HTML在线编辑网站。 jsbin.com ...

huwenchi111
2017/04/30
0
0
《AngularJS学习整理》系列分享专栏

《AngularJS学习整理》系列分享专栏 《AngularJS学习整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201748.html 文章 教你用AngularJS框架一行JS代码实现...

开元中国2015
2018/11/09
190
0
来自IOS开发工程师的零基础自学HTML5经验分享

移动互联网的火爆,而Html具有跨平台、开发快的优势,越来越受到开发者的青睐。感谢IOS开发工程师“小木_Boy”’带来的HTML5学习经验分享。 一、学习途径 1、很多视频网站 比如慕课、和极客学...

inw3cschool
2017/03/21
0
0
《HTML5学习笔记简明版》系列技术文章整理收藏

《HTML5学习笔记简明版》系列技术文章整理收藏 HTML5学习笔记简明版来自博客园的汤姆大叔,在HTML5学习笔记简明版汤姆大叔对HTML5有更详细的讲解,收藏在这里供学习参考 1HTML5学习笔记简明版...

开元中国2015
2015/06/22
11
0
微信应用号开发必备技能都在这里了啦!

“微信应用号”就像平地里炸响的一声春雷,在互联网圈内炸开了锅,小代码小程序即将成为主流,H5迎来了自己的第二春。废话少说,关于微信应用号开发技能,你都掌握了吗? 没掌握的看这里,干...

咖啡
2016/09/23
0
0

没有更多内容

加载失败,请刷新页面

加载更多

一起来学Java8(三)——方法引用

在一起来学Java8(一)——函数式编程中有一个简单的函数式编程的例子: import java.util.function.Consumer;class Person { public static void sayHello(String name) { S...

猿敲月下码
24分钟前
11
0
读书笔记:深入理解ES6(十一)

第十一章 Promise与异步编程   Promise可以实现其他语言中类似Future和Deferred一样的功能,是另一种异步编程的选择,它既可以像事件和回调函数一样指定稍后执行的代码,也可以明确指示代码...

张森ZS
47分钟前
19
0
面试官,Java8 JVM内存结构变了,永久代到元空间

在文章《JVM之内存结构详解》中我们描述了Java7以前的JVM内存结构,但在Java8和以后版本中JVM的内存结构慢慢发生了变化。作为面试官如果你还不知道,那么面试过程中是不是有些露怯?作为面试...

程序新视界
55分钟前
28
0
Elasticsearch 实战(一) - 简介

官腔 Elasticsearch,分布式,高性能,高可用,可伸缩的搜索和分析系统 基本等于没说,咱们慢慢看 1 概述 百度:我们比如说想找寻任何的信息的时候,就会上百度去搜索一下,比如说找一部自己喜...

JavaEdge
今天
23
0
【jQuery基础学习】11 jQuery性能简单优化

本文转载于:专业的前端网站➦【jQuery基础学习】11 jQuery性能简单优化 关于性能优化 合适的选择器 $("#id")会直接调用底层方法,所以这是最快的。如果这样不能直接找到,也可以用find方法继...

前端老手
今天
18
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部