我的HTML

<HTML>语法规范

<html></html>HTML标签 : 页面中最大的标签,称为根标签

<head></head>文档的头部

<titile></titile>文档标题:让页面拥有自己的网页标题

<body></body>文档的主体:元素包含文档的所有内容,页面内容基本都是放在body里面。

<!DOCTYPE>文档类型声明标签

lang 定义当前文档显示的语言

例子:

<html lang="en">//英文语言网站 zh-CN中文语言网站

<charset set>是多个字符的集合,以便计算机能够识别和存储各种文字。

例子:

<meta charset="UTF-8"/>

chaeset常用值有:GB2312,BLG5,GBK,和UTF-8其中UTF-8也叫万国码,它包含所有国家需要得字符

 

 

 

段落换行标签:

标题 :<h1></h6>   标题一共六级选,文字加粗一行显,从大到小依次减

段落:<p></p>    文本在一个段落中会根据浏览器窗口大小自动换行

换行:<br />    强制换行 ,换行垂直上下没有空隙

连接通过:<a href=""></a>    标签定义

图像通过:<img src=""/ width="" height="">   标签定义

 

 

 

文本格式标签:

加粗<strong></strong> 或 <b></b>

倾斜<em></em> 或 <i></i>

删除线<del></del> 或 <s></s>

下划线<ins></ins> 或 <u></u>

 

<div>盒子标签:

<div>和<span>标签:他们是没有语义的,他们就是一个盒子,用来装内容。

<div>:用来布局,但是一行只能放一个div。大盒子

<span>:用来布局,遗憾可以放多个span。小盒子

 

 

图像标签:<img />

<img src=" " />

src:是<img>标签必须属性,它用于指定图像文件的路径和文件名。

alt:文本属性,替换文本,当图片不能显示时候,显示文本文字

title:文本属性,鼠标放在图像上,显示的文字

width:像素属性,设置图像宽度

height:像素属性,设置图像的高度

border:像素属性,设置图像的边框粗细

注意:

图像标签可以拥有多个属性,必须写在标签名后面。

属性之间不分先后顺序,标签名与属性,属性与属性之间均以空格分开。

 

 

 

路径:

相对路径:以引用文件所在位置为参考,而建立出的目录路径。

同一级路径:图像文件位于HTML文件同一级 如<img src="baidu.gif' />

下一级路径:图像文件位于HTML文件下一级 如<img src="img/baidu.gif" />

上一级路径:图像文件位于HTML文件上一级 如<img src="../baidu.gif" />

 

绝对路径:指目录下的绝对位置,直接到达目标位置,通常是从盘符开始路径。

 

超链接标签:

<a></a>标签可以定义超链接,作用是从一个页面链接到另一个页面

<a herf="跳转目标">文本或者图像</a>:用于指定链接目标地址,(必须属性)当为标签应用href属性时,它就具有超链接功能

<a target="目标窗口的弹出方式">文本或者图像</a>:用于指定页面打开方式。_self当前窗口打开页面,_blank新窗口打开方式。

<a href="#"></a>空链接

 

锚定链接:快速定位页面某个位置

在链接文本中的href属性中,设置属性值为#名字的形式。

<a href="#two"></a>

<h3 id="two"></h3>

特殊字符:

空格符:&nbsp;

< 小于号:&lt;

> 大于号:&gt;

& 和号:&amp;

¥ 人民币:&yen;

版权: &copy;

注册商标:&reg;

摄氏度:&deg;

正负号:&plusmn;

乘号:&times;

除号:&divide;

平方2(上标2):&sup2;

平方3(上标3):&sup3;

 

表格标签:

表格标签作用:

表格标签是显示,展示数据的。

例子:

<table></table>:用于定义表格标签

<tr></tr>:定义表格的行,嵌套在<table></table>标签中

<td></tb>:定义表格的单元格,嵌套在<tr></tr>标签中

 

表头单元格标签:

表头单元格位于表格第一行第一列,表头单元格内容加粗居中显示

<th></th>

 

表格属性:属性写在<table>里面

aligh:规定表格相对周围元素的对齐方式。 left 默认的,center 居中的,right 靠右的

border:规定表格单元是否拥有边框,默认为 " " ,表示没有边框。1或 " "

cellpadding:规定单元边沿与其内容之间的空白,默认1像素。

cellspacing:规定单元之间的空白,默认2像素。

width:规定表格的宽度。

 

<thead></thead>标签:表格的头部区域,包含在表格标签<table></table>中

<tbody></tbody>标签:表格的主体区域,包含在表格标签<table></table>中

 

 

 

合并单元格:

跨行合并:rowspan="合并单元格的个数"

跨列合并:colspan ="合并单元格的个数"

 

目标单元格:(写合并代码)

跨行:最上侧单元格为目标单元格,写合并代码

跨列:最左侧单元格为目标单元格,写合并代码

 

合并单元格三步:

1.先确定是跨行还是跨列合并。

2.找到目标单元格,写上合并方式 = 合并的单元格数量。比如:<td colspan = "2"></td>.

3.删除多余单元格。

 

 

列表标签:

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

<ul></ul>只能嵌套<li></li>

有序列表:<ol></ol>

<ol></ol>只能嵌套<li></li>

自定义列表:<dl></dl>

<dl></dl>里有<dt></dt>和<dd></dd>

 

 

表单标签:收集用户信息

在HTNL中,一个完整的表单通常由表单域表单控件(也称表单元素)提示信息3部分构成。

 

表单域:包含表单元素的区域。

<form sction="url地址" method="提交方式" name="表单域名称">

各种表单元素控件

</form>标签定义表单域

常用属性:

action:url地址,用于指定接收并处理表单数据的服务器程序的url地址

method:get/post,用于设置表单数据提交方式,器取值为get或post。

name:名称,用于指定表单的名称,以区分同一页面中的多个表单域。

 

表单控件(表单元素):

<input>输入表单元素:

<input type="属性值" />他是单标签

type属性值:

button:定义可点击按钮,后期配合js使用

checkbox:定义复选框

file:定义输入文字段和"浏览"按钮,提供文件上传

hidden:定义隐藏的输入字段

image:定义图像形式的提交按钮

password:定义密码字段,该字段中的字符被掩码

radio:定义单选按钮

reset:定义重置按钮,重置按钮会清除表单的所有数据

submit:定义提交按钮,提交按钮会把表单数据发送给服务器

text:定义单行的输入字段,用户可在其中输入文本,默认宽度为20个字符

 

<input name="" />定义input元素的名称,单选按钮和复框要相同name值,这样就能选这一个值

<input value="" />规定input元素的值

<input checked="" />单选和复选框可以设置,当页面打开的时候就可以默认选中这个按钮

<input maxlength />规定输入字段中的字符的最大长度

 

<label>标签:

浏览器自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验。

语法:<label>标签的for属性对应id属性相同

<label for="sex">男</label>

<input type="radio" name="sex" id="sex" />

 

 

<select>下拉表单元素:

语法:

<select>

     <option>选项1</option>

     <option>选项2</option>

     <option selected="selected">选项3</option>选项3

</select>

1.<select>中至少包含一对<option>

2.在<option>中定义<selected>="selected"时,当前项即为默认选项

 

<textarea>文本域元素:

使用场景:当用户输入较多内容时,此时可以使用<textarea>标签

语法:

<textarea rows="3" cols="20">//rows:几行字 cols:几个字

          文本内容

</textarea>

 

  • 5
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值