HTML5笔记

HTML5

(一)

 1.html:超文本标记语言(标记语言是一套标记标签)。

2.html 基本结构标签:

根标签 <html></html>

头部标签 <head></head>

文档的标题 <title></tiitle>

文档的主题<body></body>

3.文本格式化标签:

(1)字体加粗:<strong></strong>,<b></b>

        斜体:<em></em>,<i></i>

        删除线:<del></del>,<s></s>

        下划线:<ins></ins>,<u></u>

<div></div>相当于一个盒子-大盒子,用来装内容,一行只能放一个。

<span></span>相当于一个盒子-小盒子,一行可以放多个。

(2)图像标签:<img src=“图像地址” 属性=“属性值”/>。

属性属性值说明
src图片路径
alt文本替换文本,图片不能显示时,显示文字
title文本提示文本,鼠标放在图片显示的文字
width像素设置图像的宽度
height像素设置图像的高度
border像素设置图像的边框粗细

(3)相对路径:图片相对于HTML页面的位置。

        绝对路径:目录下的绝对位置,直接到达目标位置。(如:“D:\web\img\logo.gif”或者完整的网络地址:“http://www.baidu.com”)。

相对路径分类符号说明
同一路径图片位于html文件同一位置
下一路径/位于html文件的下一级
上一路径.../位于html文件的上一级

(4)超链接标签:<a href = “跳转目标” target=“目标窗口的弹出方式”>文本或图像</a>

属性作用
href用于指定目标的URL地址
target用于指定链接页面的打开方式,_self为默认值,当前窗口打开,_blank为在新窗口打开方式
外部链接例子:<a href="http://www.baidu.com" target="black"></a>
内部链接

网站内部页面之间的相互链接,直接写链接内部页面名称

<a href="ilizi.html"></a>

空链接

没有确定链接目标时,用“#”代替

<a href="#">首页</a>

下载链接

herf里面的地址是一个文件或者压缩包,会下载这个文件

<a href="img.zip">下载文件</a>

网页元素链接

在网页中的各种元素,如文本,图像等都可以添加超链接

<a href="http://www.baidu.com"><img src="img.jpg"/></a>

锚点链接

点击链接可以快速定位到页面的某一个位置

<a href="#名字"></a>

<p id="名字"</p>

4.注释格式:<!--  -->,快捷键:ctrl+/

5.

特殊字符描述字符代码
space空格符&nbsp
<小于号&it
>大于号&gt

(二)

1.表格标签:

<table></table>定义表格的标签

<tr></tr>定义表格的行

<td></td>定义表格的单元格

<th></th>表示表格的表头部分

<thead></thead>定义表格的头部区域

<tbody></tbody>定义表格的主体区域

2.表格属性

属性名属性值描述
alignleft,right,center规定表格相对周围元素的对齐方式
borden1或“”规定表格是否拥有边框,默认为“”,表示没有
cellpadding像素值规定单元格之间的空白,文字与边框的距离,默认1像素
cellingspace像素值或百分比规定单元格的宽度,边框与边框的距离

如:<table align="center" borden="1" cellpadding="1" cellingspace="0" width="500" heigth="300"></table>

3.合并单元格

跨行合并:rowspan,目标单元格,最上侧单元格

跨列合并:colspan,目标单元格,最左侧单元格

方式:找到单元格,标记合并方式,合并的单元数量,最后删除多余的单元格。

如:<td rowspan="2"></td>

        <td colspan="2"></td>

4.列表标签

(1)无序列表<ul></ul><li></li>

注意:<ul>只能嵌套<li>,而<li>之间可以容纳所有容器。

(2)有序列表<ol></ol><li></li>

注意:<ol>只能嵌套<li>,而<li>之间可以容纳所有容器。

(3)自定义列表

<dl>定义列表

<dt>定义项目或名字

<dd>描述每一个项目

5.表单标签

(1)表单组成: 表单域,表单控件,提示信息

(2)<form></form>定义表单域

属性属性值作用
actionurl地址用于指定接受并处理表单数据的服务器程序的url地址
methodget/post用于设置表单数据的提交方式
name名称用于指定表单名称,以区分同一个页面下的多个表单元素

如:<form action="url地址" method="提交方式” name="表单域名称”></form>

(3)表单控件

<inport>输入表单元素

type属性

属性值描述
text定义当行输入字段,默认宽度为20个字符
password定义密码字段,该字段字符被隐藏
radio定义单选按钮
checkbox定义复选框
button定义可点击按钮
hidden定义隐藏的输入字段
image定义图像形式的提交按钮
file定义输入字段和浏览按钮,供文件上传 
reset定义重置按钮,清楚表单中所有数据
submit定义提交按钮,把表单数据发送到服务器
name定义input元素的名称
value定义input元素的值
checked规定此input元素首次加载时应当被选中
maxlength规定输入字段中的字符最大长度

注意:要求单个按钮和复选框name值相同

(4)<label></ label>用于绑定一个表单元素,当点击标签内文本时,浏览器光标会自动将焦点转到对应的表单元素上。

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

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

(5)下拉表单元素<select></select><option></option>

如:<option selected>选项</option>,当前项即为默认选项。

(6)文本域表单元素<textarea></textarea>:可以创建多行文本输入框

cols="每行中的字符”  rows="显示的行数”

如:<textarea rows="20" cols="5">文本内容</textarea>

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值