常用html

来源：互联网发布：淘宝达人等级v2怎么升编辑：程序博客网时间：2024/06/05 09:24

html学习笔记

1.html中常用标签

注释：
<html></html>:
<heard></heard>:在头文本中可以添加脚本、样式文本、以及各种meta信息
<meta charset = "utf-8">:文本集（中文问题）
<title></title>:显示在浏览器最上层的
<body></body>:网页页面内容部分
<p></p>：段落标签
<h></h>:标题标签

全局属性：（可以在任意html元素）
dir：规定元素中的内容文本方向
id：规定规定元素的唯一标示
lang：规定元素内容的语言
style：规定元素的css样式

<abbr>:为浏览器和搜索引擎提供信息，效果给标签框入的信息会出现下划线。
<acronym title = "文本1 的内容">简写</acronym>:此标签当鼠标放在简写上的时候会显示title中的原文本（html5不支持）
<abbr title = "文本2 的内容">简写</abbr>：此标签同理与acronym

链接标签
<a href ="网站地址" target = "_blank"></a>:链接标签此属性中href后面加链接地址（注意加上http://）,
target 属性如果值为_blank 会在新的窗口打开连接网站，style = "text-decoration:none；":去除下划线
此标签还可以连接到当前页面指定位置
例如：
<p><a href = "#c1">第一段</p> ...<p><a id = "c1">这还第n段</p>：可以连接到指定id的地方
name也有和id一样的作用
download:规定被下载的超链接目标

address：标签定义文档的作者拥有的信息，通常斜体

object：使用此元素添加多媒体，音频，视频，java applets ，pdf，flash等（图像用img）

map：映射带有可点击区域的一幅图像。属性：id：唯一标示

area：定义映射区域（规定map大小），通常与map联用。属性：alt：定义此区域的图片无法加载时的替换文本
coords：坐标值，规定可点击区域的范围。点击后连接的网页。shape：定义区域形状。target:在何处打开连接

audio:定义音频的标签属性：autoplay：如果出现该属性，则该音频在加载完毕之后立即播放，controls：向用户显示控制页面
loop：该属性出现会在音频结束之后，重新开始。muted：规定视频输出被静音 src：播放音频地址

图片标签
<img border = "1"src = "图片地址" width = "宽度" height = "高度" /> :图像 border：属性是图像边框
alt：alt属性是当浏览器无法载入图片的时候提示信息，使用方法：alt="图片失效"
图像背景：
<background ="图像地址">：如果图片不够大的时候会自动重复

<br>:换行
<hr>:水平线
常用属性：
class:为html定义类名（classname）（类名从样式文件引入）
id :定义元素的唯一id
style :规定元素的行内格式
title:描述元素的额外信息

文本格式
<b></b>:加粗字体
<i></i>:斜体文本
<strong></strong>:同样是一个加粗文本（突出显示）
<em></em>:斜体文本（突出显示）
<sub></sub>:上标
<sup></sup>:下标

预格式文本
<pre></pre>：这个标签会保存输入文本的格式

地址文本
<address></address>:地址标签配合href使用，但是感觉只有变斜体

文本方向：
<p><bdo dir = "rtl">文本</bdo></p>:bdo标签可以使文本反向显示

文本属性：
fount-family:字体属性属性值有：verdana、arial
color：颜色
font-size:字体大小
<blockquote></blockquote>：长引用,使用blockquote属性的时候浏览器会插入换行和外边距
<q></q>:此属性也是引用到时不会有任何显示，但是会用双引号
&nbsp:空格符号

文本对齐方式：
text-align：值有：center居中、left向左、right：向右（浮动）

删除字与插入字效果：
<del></del>:删除字会有一个中划线
<ins></ins>:插入字会有下划线

显示计算机代码：
<code></code>
<kbd></kbd>
<tt></tt>
<samp></samp>
<var></var>

表格：
<table></table>:表格属性，表格中border属性是规定表格的边框的宽度
<tr></tr>:表格中的行属性
<td></td>:表格中的列属性
<th></th>:表格中的表头属性
创建一个表格
<table border="1">
<th>我的第一个表格呀<th>
<tr>
<td>第一行内容1</td>
<td>第一行内容2</td>
</tr>
<tr>
<td>第二行内容1</td>
<td>第二行内容2</td>
</tr>
</table>

跨行：rowspan="行数量"
跨列：colspan="列数量"
单元格的边距：
cellpadding：表示单元格内的内容与边框的距离，使用方法：cellpadding="数值"
单元格间距：
cellspaceing:表示单元格之间的距离

1 列表标签：
<td>
<ul> 
<li></li>
<li></li>
<li></li>
</ul>
</td>
<td>
2 列表标签：
<td>
<ol> 
<li></li>
<li></li>
<li></li>
</ol>
</td>

html中的类：为相同的类设置相同的样式，或者为不同的类设置不同的样式。
使用方法：
（在heard（头）--style 中描述一个雷）
.class1(自定义类名){

各种格式：比如字体，颜色，背景等
}

在body（身体）中去调用它
<div class="class1">内容</div>

span元素：与类差不多，使用方法如下
在相同的位置
span.red(自定义名称){自定义样式}
在想要约束的位置
<span class="red">内容</span>

html的布局：在html中提前设置格式有两种方法，1.直接用格式名后面加大括号，括号中放入各种要求属性，调用方法，
直接把此格式名，用作标签。2.在定义格式名前面加#，调用的时候用<div id="格式名"></div>
不管哪种定义格式的方式，在描述高(height),宽(width),行间距(padding)等属性的时候要注意加px。

框架结构标签：<frameset> 其中rows与columns的值规定每行每列占据屏幕的面积，不能将frameset标签
与body一起使用,一起使用的话会只解析前面出现的。
垂直框架：在显示器上竖直的呈现几个"盒子"
使用方法：<frameset cols = "百分比，百分比，百分比">
<frame><frame><frame>
<frameset>

水平框架：在显示器上水平的呈现几个"盒子"
使用方法：<frameset rows = "百分比，百分比，百分比">
<frame><frame><frame>
<frameset>

导航框架：标签：frame 属性：src（默认显示的网页地址）、name（引用网页标记）
例如：创建一个简单的导航框架
1 首先要创建几个页面用作跳转（无要求）
（3.html,4.html,5.html....）
2 要创建一个总和跳转页面的页面，用作显示在总页面的左面,并且把链接到的界面显示在右边（target：标记）
2.html（<a href = "3.html" target="标记">1</a> <a href = "4.html" target="标记">1</a> ）

3 要创建总页面
1.html(<frame cols ="百分比，百分比" ><frame src = "2.html(即链接总和界面)"><frame src= "默认右面显示界面地址" name = "标记（同上）"></frame>)

内联网页：标签：iframe 属性：src（默认显示的网页地址）、name（引用网页标记【例如想要在内敛部分显示一个
链接指向的地址，即点击链接即可把链接后的网页显示在内联部分】）

例如：（点击链接即可把链接后的网页显示在内联部分）
<iframe src = "默认显示网页的地址" name = "链接网页的标记"></iframe>
<a href = "想要指向的网页" target = "链接网页的标记（同上）"></a>

html表单：
表单标签<from></from>，表单中有input元素（输入有几个常用的类型：text【文本】，radio【单选】，submit【提交按钮】），复选框，单选按钮，提交按钮

表单元素之：input属性：
例如：(input 文本类型text ,password 是定义密码在显示的时候会是***)
<form>
user name:<br>
<input type="text" name="firstname">
<br>
password name:<br>
<input type = "password" name = "firstname">
</form>

例如：(input 单选框radio)
<form>
<p>性别</p>
<input type = "radio" name = "sex" value = "male" checked>male
<input type = "radio" name = "sex" value = "female"> female
</form>

例如：定义复选框（input checkbox）
<form>
<input type ="checkbox" name="vehicle" value = "bike">bike
<br>
<input type ="checkbox" name ="vehicle" vaule = "car">car
</from>

例如：(input 提交按钮submit)
<form>
<p>id</p>
<input type = "text" value = "xiaoming" >
<p>password</p>
<input type = "text" value = "********" >
<input type = "submit" vaule="确定">
</form>

number:属性用于对数字做出限制(max:规定最大值，min：规定最小值，step：每一次跳多少，value：默认值)
例如：
<form>
<p>1-100<p>
<input type="number" name ="quantity" min =0 max = 100 step=10 value=0>
</form>

date：输入时间类型（允许年月日）
例如：
<form>
<p>请输入1000-1-1到2050-1-1的日期</p>
<input type="date" min="1000-1-1" max="2050-1-1">
</form>

month:输入时间类型（允许输入年与月份）
例如：
<form>
<input type= "month" name = "m">
</form>

week:输入时间类型（允许输入年与月份与周）
例如：
<form>
<input type = "week" name="m">
</form>

time:输入时间类型（输入上下午与时间（时分））
<from>
<input type = "time">
</from>

color:输入颜色（根据颜色选择器）
例如：
<form>
<input type = "color" name>
</form>

range:显示滑块组件
例如：
<form>
<input type = "range" name = "point" min ="0" max="10">
</form>

input的重要属性
value：默认值
readonly：只读，不能修改
disable：不可点击不可使用
size：用于规定字段长短

fieldset：组合表单数据（将一部分表单数据分组）属性：legend：为fieldset属性定义标题

表单元素之：select元素（下拉列表）selected属性规定默认值
例如：
<select name = "car">
<option vaule = "volvo">volvo</option>
<option vaule = "saab">saab</option>
<option vaule = "fiat" selected>fiat</option>
<option vaule = "audi">audi</option>
</select>

textarea元素：定义多行文本
例如：<textarea name = "message" rows="10" clos="30">
The car is coming!!!
</textarea>

button:按钮
例如：写一个按钮点击就会显示helloworld
<button type ="button" onclick ="alert ('hello world')">点击</button>

datalist属性：在往输入框中输入时候会有已经定义好的提示列表
例如：
<form>
<input type="text" list="name">
<datalist id = "name">
<option value="internet Explorer">
<option value = "firefox">
<option value="chrome">
<option value = "Opera">
<option value = "safari">
</input>
</form>

阅读全文

0 0