【笔记-JAVE_WEB】 HTML

<html>

<head>

</head>

<body>

段落文字

</body>

</html>

注释：

文本

中文支持

只保留空格，标签内文字写换行不起作用

<p> 段落标记在前后都加入空行

<h1> 1级标题一直到<h6>

<br/> 换行

<center> 使内容居中

<b>粗体

<i>斜体

<sup>上标

<sub>下标

<big>大号字体

<small>小号字体

<strong>加强语气

<del>删除线　　内容

<ins>下划线　　内容

<blockquote>　　大段文字　　会自动插入换行和外边距

<bdo dir=”rtl”>hello</bdo> 倒序输出：olleh

预格式文本

保留标签内文字格式

<pre>

for(int i=0;i < 10;i++)

{

cout << i ;

}

</pre>

代码显示

<code>

<kbd> keyboard

<tt>

<samp>

<var>

实体

保留字符，如< 使用<

显示结果	描述	实体名称	实体编号
	空格
<	小于号	<	<
>	大于号	>	>
&	和号	&	&
"	引号	"	"
'	撇号	' (IE不支持)	'
￠	分（cent）	¢	¢
£	镑（pound）	£	£
¥	元（yen）	¥	¥
€	欧元（euro）	€	€
§	小节	§	§
©	版权（copyright）	©	©
®	注册商标	®	®
™	商标	™	™
×	乘号	×	×
÷	除号	÷	÷

区域

<div>定义一个区域

<span>定义文本区域

<p>abcd<span>XX</span>efghi</p>

列表

<ul>为无序列表 <ol>为有序列表

<ul>

</ul>

Type默认为disc（实体圆）

自定义列表

<dl>
    <dt>aaa</dt>
      <dd>scriptAA</dd>
    <dt>bbb</dt>
      <dd>scriptBB</dd>
</dl>

表格

</table>

tr创建一行，th创建标题行内容，td创建单元格内容

<td> </td> 空单元格

colspan="4" 合并4列

可以在界面设置一个无边框的表格，在表格中放置内容进行排版

js中使用 **.deleteRow(x); 删除第x行

属性

属性内容用属性=”..”

如果属性值本身含有双引号，那么必须使用单引号。如：

name=’aaa”bbb”ccc’

1. 通用属性

id	唯一标识一个标记对，表示一个数据，对应css中 #*
name	可以重复，可以表示一组数据
class	对应css中 .*
width height	元素宽高 "100%"表示占所在空间的比例(最外层元素则为浏览器宽度)，位置不够时会自动伸缩
title	当鼠标移动到标签时提示title内容

1. 标签属性

bgcolor	用于body <body bgcolor="red"></body> bgcolor=”#FFFFFF”bgcolor="red" 或者rgb(255,255,255)或者white 也可以用图片地址
background	设置背景图像，图像小的时候则重复铺入 <body background ="1.png" >
border	用于table Border属性为数字，0表示无边框 <table border=”1”>
Bool属性	checked="checked" 或 checked 都代表勾选，不写代表默认不勾选

链接

address 标记中放置的文本显示为链接样式文字

</address>

1. 跳转属性

_blank表示新页面打开

_self当前页面打开

1. 文本连接

<a href="b.html">本网站的一个页面</a>

1. 图像链接

1. 页面内连接

<a href="#s">跳转到开头</a>

#代表当前页面

1. 页面嵌套

Src使用#代表当前页面，url可以显示其他网页

表单
1. 定义

======表单元素=====

</form>

f1.** 可以通过元素id或者name访问到元素

name或id可以标识表单，通过f1.inputContent.value 可以获取表单中输入数据，f1调用方式对于p这类标签不起作用

也可以使用 In= document.getElementById("inputContent");

1. 表单的提交

用户名:<input type="text" name="user"/>

</form>

submit是提交按钮（特殊按钮），会调用form中的action

数据会传送到b.html页面中

target为打开新页面方式，默认为当前页面打开(_self)，包括_blank ，_parent,_top

method为post代表把输入数据按照http协议中的post方式传送到服务器，get将输入的数据追加到action指定的地址后面（在地址栏可以看到），并传送到服务器。

表单提交时会将form中所有表单元素内容进行提交（非表单元素或没有name属性不提交）

1. 按钮

1. 输入框

用户名:<input type="text" name="name"/>

密码：<input type="password" name="code"/>

1. 文件选择

1. 单选按钮

<input type="radio" name="sex" value="male"/>Male

<input type="radio" name="sex" value="female"/>Female

获取选择内容

var sexval = document.getElementsByName("sex");

for(var i = 0; i < sexval.length;++i )

{

if(sexval[i].checked)

alert("check "+ sexval[i].value);

}

1. 组选按钮

<input type="checkbox" name="x"/>A

<input type="checkbox" name="x"/>B

1. 下拉列表

</select>

获取数据：

var val = document.getElementById('nu').value;

或者

var val = document.getElementsByName(number)[0].value;

1. 标题框

<form>

</form>

</filedset>

Lable可以确保其中的内容为一行

1. 文本框

<textarea>多行文本，支持回车符 cols和rows设置区域大小

1. 重置输入内容

重置form中的输入内容

图像
1. 图像显示

位置是相对位置，可以是当前目录相连的的目录，也可以是其它网页目录中的内容。

align=”bottom” 默认值

也可以是middle,top,left,right

如果图像无法显示，则显示alt内的内容

1. 图像映射

为图像中的某些区域创建映射，使其可以点击跳转

</map>

mate

刷新，content中包含刷新等待时间（秒），分号后写跳转到的页面地址

框架

可以在页面中嵌套其他网页

<iframe src="https://****"></iframe>

a标签中的target属性的_parent和_top在框架中就可以体现出来。

功能
1. 刷新页面

1秒刷新一次

html5标记
1. 标签

区域（类似div）	使用
header	一个内容区域或整个页面的标题
article	强调独立区域
footer	区域块的底部
section	强调同级别分类
nav	包含导航翻页等操纵链接
aside	用来表示当前页面或文章的附属信息
hgroup	对h1-h6的标签进行分组(将相关的放在一个hgroup下)
figure

input类型	使用
email
url
number
range
date

标签	使用
canvas
video
audio
embed
mark
progress
meter
time	<time datetime="2017-01-01T20:00+01:00">2017-01-01</time> datetime属性可以确保显示正确，+01：00表示时差多一个小时
ruby
rt
rp
wbr
command
details
datagrid
keygen
output
source
menu

1. 属性

属性	使用
contenteditable	<p contenteditable="true"> xxx</p> 标记后元素内容在页面可编辑
designMode	设置可编辑状态，只能在js中用 document.designMode="on"
hidden	bool属性（不需要写内容），让元素隐藏
spellcheck	输入内容拼写检查

表单属性	使用
formaction	<input type="submit" value="b1" formaction="f2.html"/> 可以指定submit按钮提交的action，而不用固定走外部form的action
formmethod	指定form中提交按钮提交的方式(get,post)
formtarget	指定form中提交按钮提交的打开新页面方式(_blank等)
autofocus	鼠标焦点设置，bool属性(不需要写内容)
required	如果定义该属性的元素没有输入内容，提交时会提示，不允许提交

【笔记-JAVE_WEB】 HTML

猜你喜欢