HTML基础学习笔记

时间 2019-11-05

标签 html 基础学习笔记栏目 HTML 繁體版

原文原文链接

一、页面

一、文件结构

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

<head>......</head>面试

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

<HTML>
<HEAD>
     <title>, <base>, <link>, <isindex>, <meta>
</HEAD>
<BODY>
  <h1>正文</h1>
</BODY>
</HTML>

二、语言字符集信息

基本上全部的网站的网页都有，如今通常都是UTF-8,和GBK2312
布局

三、背景色彩和文字色彩

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

bgcolor --- 背景色彩网站
text --- 非可连接文字的色彩ui
link --- 可连接文字的色彩url
alink --- 正被点击的可连接文字的色彩spa
vlink --- 已经点击(访问)过的可连接文字的色彩

（颜色RGB16进制）

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

四、页面空白(试了貌似无论用)

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

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

五、链接

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

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

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

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

下面百度是在新窗口打开

<a href="  target="Window_Name">百度</a>

六、标尺线

<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>

二、字体

一、标题字体

字体由大到小

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

二、字体大小

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

三、物理字体

加粗：<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>

四、逻辑字体

强调字体倾斜：<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告诉炒菜的师傅“炒得辣一点”，这是逻辑风格，指定做用。

五、字体颜色

六、客户端字体

七、字符实体

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

三、文字布局

一、行的控制

空行:<p>

换行：<br>

不换行<nobr>

二、文字的对齐

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

三、文字的分区显示

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

四、列表

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

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

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

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

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

五、预格式化文本

六、块引用:

七、闪烁

<!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>

四、图像

一、插入图像基本语法：

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

二、图像和文字的对齐

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

三、边框

<img border=# > #=value

五、表格

一、基本语法：

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

默认的不带边框，

带边框的表格：<table border>

二、跨多行，多列的表元

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

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

三、表格尺寸设置

边框尺寸设置：<table border=#>

表格自己尺寸设置：<table border width=# height=#>

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

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

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

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

五、表格在页面的对齐

<table align=#>#=left right center

六、表格标题

七、表格色彩

<!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>

八、表格中分隔线的显示

显示全部的分隔线：<table rules=all>

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

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

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

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

六、表单

一、基本语法

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

（enctype=”multipart/form-data”提交文件）

.........

</from>

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

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

文字输入：*=text

密码输入：*=passwd

复选框：*=checkbox （默认选中 checked="checked'）

单选框：*=redio

图像坐标：*=image

隐藏表单元素：*=hidden

文件：type=file

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

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

七、移动的文字

一、基本语法

二、文字移动的属性设置

<marquee direction=#>.....</marquee> #=left,right（移动的方向，向右，向左）

三、方式：

#=scroll（一圈一圈绕着走）

#=slide（只走一次）

#=alternate (来回走)

四、循环

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

五、速度

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

六、延时

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

八、多媒体内容