HTML基础语法总结

旧城等待， 2022-07-29 06:24 266阅读 0赞

Leftmargin topmargin用来调整链接或文字位置

Text用来调整字体颜色

<XMP><a href="http://www.baidu.com">点击进入百度页面</a> 添加链接</XMP>

alink点击时链接 link当前显示链接 vlink点击后链接 主要用来控制链接字体的颜色

bgcolor用来设置背景颜色

background用来设置背景图片（GIF、JPG）

background=fixed使背景图片成固定效果，不随滚动条滚动

HTML定义了6级标题，1-6级，标题文字随级数增大而减小

通过align来控制文本出现的位置，属性值有3种，分别为left、center、right

**文字设置**

<XMP>

<B>设置文字以粗体方式显示，语法<B> </B>

<I>设置文字以斜体方式显示，语法<I> </I>

<SUP>设置文字以上标文本方式显示，语法<SUP> </SUP>

<SUB>设置文字以下标文本方式显示，语法<SUB> </SUB>

<U>设置文字以下划线方式显示，语法<U> </U>

<S>设置文字以删除线方式显示，语法<S> </S>

</XMP>

**FONT控制字体，大小，颜色**

**段落设置**

<XMP>

<P>段落标记，一般情况下在每个段落的前面加一个<P>标记既可以区分段落，又可以换行

<BR>之后的文字在下一行显示

<HR>设置水平线

<center>标记所有包含的内容，将以居中对齐的方式显示在网页中

<PRE>标签可以把原文件中的空格、回车、换行、Tab键表现出来

**<NOBR>**标记将取消浏览器由于窗口大小变化而换行

**<XMP>**在HTML文档中加入<XMP>标记，使标记内的HTML标记不起作用

&lt代表<，&gt代表>

</XMP>

**<XMP>**

**<MARQUEE>标记可以使文字产生跑动的效果**

direction 文字跑动的方向

bgcolor设置文字背景颜色

height设置文字跑动的高度

width设置文字跑动的宽度

hspace设置文字的水平边距

vspace设置文字的上边距

behavior设置文字的运动方式(scrol/alternate/slide)

loop设置文字跑动的圈数

scrollanount设置跑动文字的移动速度

scrolldelay设置跑动文字的移动延时

</XMP>

**HTML超链接**

<XMP>

格式<A>这是一个链接</A>

href设置超链接目标地址URL(全球资源定位)

name在html文档中建立特定位置的名称

target设置被链接的网页打开时的窗口\_blank/\_parent/\_self/\_top

acceskey设置超链接的快捷键

title设置超链接的说明文字

style运用css样式设置超链接的文字样式

利用这些属性可以设置锚点(返回顶部之类)

</XMP>

**HTML列表**

列表分为三种类型：有序列表、无序列表和自定义列表

有序列表使用编号来记录项目的顺序，无序列表使用项目符号来记录无需的项目，自定义列表由两部分组成：定义条件和定义描述

<XMP>

**有序列表：**

</OL>

</XMP>

type

1 阿拉伯数字

a 英文小写

A 英文大写

i 罗马小写数字

I 罗马大写数字

start编号样式的起始数字，如：编号样式设为A，起始值设为2，则列表的起始值为B

<XMP>

**无序列表：**

</UL>

</XMP>

type

circle 空心圆

disc 圆点

square 正方形

**<XMP>**

**自定义列表：**

<DL>

<DT>用于定义列表</DT>

<DD>用于解释名词的列表，包含两个层次，一是名词，一是名词的解释</DD>

</DL>

</XMP>

**HTML表格：**

格式：

<XMP>

<table>

<tr><td>表格中第一行第一列数据</td><td>表格中第一行第二列数据</td></tr>

<tr><td>表格中第二行第一列数据</td><td>表格中第二行第二列数据</td></tr>

</table>

</XMP>

<XMP>

<table>标签的属性：

border 设置表格边框

caption 设置表格标题

align 设置表格在网页中的布局

width 设置表格宽度

height 设置表格高度

cellspacing 设置表格各单元格之间的距离

cellpadding 设置单元格内部与文本之间的距离

bordercolorlight 设置表格亮面颜色

bordercolordark 设置表格暗面颜色

</XMP>

<XMP>

<tr>标签属性：

bgcolor 设置行背景颜色

align 设置行对齐方式

valign 设置单元格垂直对齐方式

</XMP>

<XMP>

<td>和<th>标签属性：

bgcolor 设置单元格背景颜色

rowspan 设置单元格所占行数

colspan 设置单元格所占列数

align 设置对齐方式

valign 设置单元格垂直对齐方式

width 设置单元格宽度

height 设置单元格高度

</XMP>

<XMP><th>用来表示数据的名称</XMP>

HTML特殊表格

rules 设置单元格的特效

fieldset 设置特殊表格

**HTML表单**

格式：

<XMP>

</form>

</XMP>

1. name: 设置表单的名称

2. action: 设置表单的表单的处理程序的URL

3. method: 提交表单的方法

**输入域<input>**一般在表单中使用

<XMP>

1.<input type="text"/>输入单行文字

size属性为宽度，value为默认值，maxlength为可输入的最大长度，readonly为只读，该属性值只有一个，即readonly；

2.<input type="password"/>输入密码

3.<input type="radio"/>单选按钮

利用name属性进行分组，相同name值为一组；

4.<input type="checkbox"/>多选按钮

checked属性表示选中，属性值只有checked

5.<input type="image"/>图片

使用src属性指定图片地址，用来实现美化的“登录按钮”；

6.<input type="file"/>文件上传

使用file，则form的enctype必须设置为multipart/form-data，method属性设为POST；

7.<input type="hidden"/>隐藏域

8.<input type="reset"/>撤销按钮

9.<input type="submit"/>提交按钮

通过value值来改变现实的文本；

10.<input type="button"/>普通按钮

通过value值来改变现实的文本；

</XMP>

<XMP>

**<textarea>标签**

多行文本输入标记格式：

......

</textarea>

</XMP>

name 设置识别名称

rows 设置文本域的行数

cols 设置文本域的列数

disabled 设置文本为禁用

**warp** 设置为off不换行

**<lable>标签**

在<input type=”text”/>前可以写普通的文本来修饰，但是单击修饰文本时input并不会得到焦点，而用lable标签则可以；

for属性指定要修饰的空间的id；

为被修饰的空间设置一个唯一的id；

<XMP>

**<filedset>标签**

类似WinForm中的GroupBox效果，将控件划分一个区域，看起来更规整；

<legend>要显示的属性值</legend>

</filedeset>

</XMP>

**选择域<select>**

用来创建类似于WinForm中的ComboBox或者ListBox；

如果size属性大于1就是ListBox（size值为显示出来的列表数量），否则就是ComboBox，默认为ComboBox；

通过select的multiple属性(multiple只有一个属性值)可以设置多选的ListBox；

格式：

<XMP>

<option selected>选项一</option>表示该项已选中

.....

</select>

<optgroup lable=“分组名”>使选项更清晰

<option selected>选项一</option>表示该项已选中

……

</optgroup>

</select>

</XMP>

**HTML的框架**

使用框架可以划分页面

格式：

<XMP>

<head>

</frameset>

<body>

</body>

</head>

</XMP>

frameset标签属性

cols 设置列的大小

rows 设置行的大小

frameborder 是否显示边框 yes/no,1/0

framespacing 设置分割条大小

<frame>标签属性

**src设置要链接的HTML文件**

name 窗体的名称

marginwidth 设置窗口左右边界的距离

marginheight 设置窗口上下边界的距离

scrolling 设置窗口是否使用滚动条yes/no,默认使用auto，即窗口有滚动条使使用滚动条，没有滚动条时不使用滚动条

noresize 不能调整窗口大小

**HTML iframe标签**

使用格式：

<XMP>

...

</iframe>

</XMP>

src 设置要链接的HTML文件

frameborder 是否显示边框yes/no,1/0

width 设置宽度

height 设置高度

scrolling 设置窗口是否使用滚动条yes/no,默认为auto

HTML不把“ ”当空格，因为HTML中经常有缩进，如果把缩紧的空格在浏览器中以空格的形式展现，排版会很麻烦；

<小于号  >大于号  &nbsp;空格符

相对URL：表示对当前文档的资源，“/”表示网站根目录，“../”表示父目录，“./”或者不写任何斜线便是相对于当前路径的目录，站内引用最好用相对URL，这样域名改变了、目录改变了都不受影响；

<XMP>

<image src=”../images/csharp.jpg”/>表示父目录下查找

< image src=”/images/csharp.jpg”/>表示根目录下查找

</XMP>

**<image>标签**

Src指向的文件，图片是链接的，不是插入的，当src指向的文件不存在了，图片就看不了了；

Title鼠标放上去显示出来的文字

Alt属性为图片无法显示时的显示文本，鼠标方式去也会有悬浮提示“点击查看大图”；

Border属性指定边框，属性值为0时不显示边框；

Width、height属性指定现实的图片大小，如果不指定则是图片的原始大小；

最好指定Width、height，哪怕是原始尺寸大小，因为如果不指定大小，图片会不占位置，图片下载后才调整大小，会造成页面很乱；

**CSS（层叠样式表）**

用来美化页面，可以对页面元素进行更精细的设置，样式主要描述元素的字体颜色、背景颜色、边框等。CSS主要有元素内联、页面嵌入和外部三种使用方式。CSS是描述元素的皮肤！

元素内联，直接将样式写在元素的style属性中

<XMP>

<input type=”text” style=”background-color:red”/>适用于样式没有可重复性的场合

页面嵌入：在head中加入

Input\{background-color:red\}

要设置的样式…

</style>

</XMP>

表示页面中所有的input都采用指定的样式。适用于样式重复，减少页面体积；

外部引用，将css内容写入css后缀文件

Textarea\{ background-color:red\}

然后再页面中引用，在head中加入

适合于多个页面共享css。

**Div(层)**

层：<Div></Div>将内容放到层中，就以将这些内容当成一个整体进行处理，比如整体隐藏、整体移动等。类似于WinForm中的Panel；

**Span（块）**

Div是将内容放到一个矩形的区块中，会影响布局，而span只是将一段内容定义成一个整体操作，但不影响布局显示；

**常见样式：**

Css计量单位：css中表示宽度、距离时有多种计量单位：px（像素）、30%（百分比）、em（相对单位）等。Width：20px

Background-color：red;背景颜色，color：文本颜色

Border-style：solid；边框风格（默认没有边框），还有dotted（点）等值；

Border-color：边框颜色；border-width：边框宽度（默认为0）。

例：style=“border-color：red；border-width：1px;border-style：dotted；”

Display：元素是否显示，可选值none（不显示），block（显示为块级元素，此元素前后会带有换行符。）、inline（显示为内敛元素，元素前后没有换行符）等。

Cursor：鼠标在元素上时显示的光标图标，可选值：cursor（默认光标）、pointer（超链接上的手）、text（输入bean）、wait（忙沙漏）、help（帮助）等。

LI不显示圆点：LIST-STYLE-TYPE:none；一般设在li或者ul上

应用：图片：不显示边框，见备注

**样式选择器**

对于非元素内联的样式需要定义样式选择器，通俗的说就是这个样式适合于哪些元素，三种：标签选择器、class选择器和id选择器。

标签选择器:

<XMP>input\{border-color：yellow；color：red\}</XMP>，对于指定的标签采用统一的样式

class选择器：

以定义一个命名的样式，然后在用到它的时候设定元素的class属性为样式的名称，还可以同时设定多个class，名称之间加空格

<XMP>

.warning\{blockgroud:yellow\}

.highlight\{font-size:xx-large;cursor:help;\}

<table>

<tr>

</tr>

</table>

</XMP>

**标签+class选择器**

Class选择器也可以针对不同的标签有不同的样式，只要在样式名前加标签名即可。

<XMP>

Input.accountno\{text-align:right;color:red;\}

Label.accountno\{font-style:italic;\}

<label class=”accountno”>Hello</label>

</XMP>

**Id选择器**

为指定id的元素设定样式，id前加\#

<XMP>

\#username

Font-size:xx-large；

Style、class可以同时组合使用

</XMP>

**关联选择器：**

<XMP>

P strong\{background-color：yellow\}

表示P标签内的strong标签内的内容使用的样式

<strong>aaaaaaaa</strong>

<p><strong>bbbbbbb</strong></p>

</XMP>

**组合选择器，同时为多个标签设定一个样式**

<XMP>

H1，H2，input\{background-color:yellow\}

<h1>nihao</h1>

</XMP>

**伪选择器，为标签的不同状态设定不同的样式；**

A:visited；超链接点击过的样式；

A：active；选中链接时的样式；

A：link；超链接未被访问时的状态；

A：hover；鼠标移到超链接时的状态；

A:visited\{TEXT-DECORATION:none\}

A：active\{TEXT-DECORATION:none\}

A：link\{TEXT-DECORATION:none\}

A：hover\{TEXT-DECORATION:none\}

多套用指定格式；

HTML基础语法总结

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 html基础语法

相关 HTML & CSS 基础语法总结

相关 java基础语法总结

相关 html基础总结

相关 HTML基础语法总结

相关 HTML基础语法总结

相关 python：基础语法总结

相关 HTML语法基础（1）

相关 HTML基本语法总结

相关 HTML基础语法入门