H5学习感悟04

浏览器的内核

浏览器名内核名特点
FirefoxGecko代码公开
safariWebkit
ChromeBlink
OperaPresto/chrome(现)
ieTrident

web标准

  • 结构标准
  • 样式标准
  • 行为标准

html的骨架格式

<html>
    <head>
            <title></title>
    </head>
    <body></body>
</html>

生成骨架的快捷键
html:5 + tab
! + tab


代表当前用的是html5的版本

标签

排版标签


标题标签

h1-h6

<h1></h1>

段落标签

<p></p>

首行缩进

 	<style type="text/css">
 		p{
 			text-indent: 2em
 		}
 	</style>

水平线标签(单)

<hr />

换行标签(单)

<br />

布局标签,没有语义

<div></div>
<span></span>

文本格式化标签

标签效果
<b></b> <strong></strong>文字粗体方式显示
<i></i> <em></em>文字 斜体
<s></s> <del></del>文字 删除线
<u></u> <ins></ins>文字下划线

推荐用后一种,加强语义

标签属性

<hr width="500">
  • 标签的属性不需要加单位
  • 属性不分顺序 但属性之间要空格隔开

图片标签(单)

<img src="../file/test.png">
img标签属性作用
src图片路径
alt图片显示不出的替换文字
title当鼠标悬停的时候显示的文字

链接标签

<a href=""></a>
a链接属性作用
href要跳转的页面路径
target_blank: 新窗口打开 _self:当前窗口

锚点定位

  • <a href='#id'></a>
  • 需要跳转的地方添加标签<标签 id="id"></标签>
<a href="#xixi">跳转</a>
<h2 id="xixi">6666</h2>

base标签(单)

<base target="_blank">
  • 必须放在head标签下

特殊字符

特殊字符作用
&nbsp;空格符
&lt;<
&gt;>
&amp;&
&copy;版权符

注释标签

 <!--  -->

列表标签

无序列表

	<ul>
 		<li>111</li>
 		<li>222</li>
 		<li>333</li>
 	</ul>

ul下只放li标签,其他的标签可以写在li下

有序列表

 	<ol>
 		<li>111</li>
 		<li>222</li>
 		<li>333</li>
 	</ol>

ol下只放li标签,其他的标签可以写在li下

自定义列表

 	<dl>
 		<dt>111</dt>
 		<dd>222</dd>
 		<dd>333</dd>
 		<dd>444</dd>
 		<dd>555</dd>
 	</dl>

表格标签

处理整齐的大批量数据
tr 行标签

td 列标签

<table>
<tr>
<td></td>
</tr>
</table>

表格的属性

表格属性作用
border设置表格的边框
cellspacing单元格与单元格之间的空白距离(默认2px)
cellpadding单元格内容与单元格的距离(默认1px)
align表格相对于网页的水平位置(left center right)

表头标签

加粗居中显示

<table>
<tr>
<th></th>
</tr>
</table>

表格结构

thead+tbody

<table border="1" width="100" cellspacing="1"  cellpadding="0" align="center">
 		<thead>
 			<tr>
 			<td>
 				<div></div>
 				<p>66666</p>
 			</td>
 			<td>
 				<div></div>
 				<p></p>
 			</td>
 			<td>
 				<div></div>
 				<p></p>
 			</td>
 		</tr>
 		</thead>
 		<tbody>
 			<tr>
 			<td>
 				<div></div>
 				<p></p>
 			</td>
 			<td>
 				<div></div>
 				<p></p>
 			</td>
 			<td>
 				<div></div>
 				<p></p>
 			</td>
 		</tr>
 		<tr>
 			<td>
 				<div></div>
 				<p></p>
 			</td>
 			<td>
 				<div></div>
 				<p></p>
 			</td>
 			<td>
 				<div></div>
 				<p></p>
 			</td>
 		</tr>
 		</tbody>
 	</table>

表格的标题

caption

<table>
 		<caption>表格的标题</caption>
 		<thead>
 			<tr>
 				<td></td>
 				<td></td>
 				<td></td>
 			</tr>
 		</thead>
 		<tbody>
 			<tr>
 				<td></td>
 				<td></td>
 				<td></td>
 			</tr>
 			<tr>
 				<td></td>
 				<td></td>
 				<td></td>
 			</tr>
 		</tbody>
 	</table>

合并单元格

跨列合并

colspan 合并的列数

	<table width="200"  border="1px">
 		<caption>表格的标题</caption>
 		<thead>
 			<tr>
 				<td>111</td>
 				<td>222</td>
 				<td>333</td>
 			</tr>
 		</thead>
 		<tbody>
 			<tr>
 				<td>444</td>
 				<td>555</td>
 				<td>666</td>
 			</tr>
 			<tr>
 				<td>777</td>
 				<td colspan="2">888 999</td>
 				
 			</tr>
 		</tbody>
 	</table>

跨行合并

rowspan 合并的行数

	<table width="200"  border="1px">
 		<caption>表格的标题</caption>
 		
 			<tr>
 				<td>111</td>
 				<td>222</td>
 				<td rowspan="2">333666</td>
 				
 			</tr>
 		
 		
 			<tr>
 				<td>444</td>
 				<td>555</td>	
 			</tr>
 			<tr>
 				<td>777</td>
 				<td colspan="2">888 999</td>
 				
 			</tr>
 	
 	</table>

表单标签

input控件(单标签)

maxlength :输入的文本最大长度
value :默认文本

input type 属性作用
text文本框
password密码框
radio单选按钮
checkbox复选框
button普通按钮
submit提交按钮
reset重置按钮
image图像按钮
文件域文件域

文本框和密码框

	文本框<input type="text" name="">
 	密码<input type="password">

单选按钮

如果是一组,通过相同的name实现单选

 	单选按钮 <input type="radio" name="sex"><input type="radio" name="sex">
默认选中

checked="checked"

	<input type="radio" name="sex" checked="checked">

复选框

	复选框 
         <input type="checkbox" name="hobby1">篮球
 	<input type="checkbox" name="hobby2"><input type="checkbox" name="hobby3"><input type="checkbox" name="hobby4">rap

按钮

普通按钮
普通按钮 : <input type="button" value="普通按钮 ">
提交按钮
	提交按钮 :<input type="submit" value="提交按钮">
重置按钮
	重置按钮 :<input type="reset" value="重置按钮">
图像按钮
图像按钮 :<input type="image" src="../file/test.png" name="">

label 标签

 	<label>
 		文本框 <input type="text" name="">
 	</label>

**如果label有多个表单,可以通多for-id 的形式定位**

 	<label for="tag">
 		文本框 <input type="text" name="">
 		文本框2 <input type="text" name="" id="tag">
 	</label>

文件域

文件域  :<input type="file" name="">

文本域

<textarea></textarea>

表单域

属性作用
actionurl地址
method提交方法
name表单名
<form action="" method="post">
	

</form>

下拉菜单

 	<select>
 		<option>111</option>
 		<option>222</option>
 		<option>333</option>
 		<option>444</option>
 	</select>
    
    
 	<select>
 		<option>111</option>
 		<option>222</option>
 		<option>333</option>
 		<option selected="selected">444</option>
 	</select>

selected=“selected” 默认选中

html5新增标签和属性

header

标签定义文档的页眉(介绍信息)

	<header>
	<h1>Welcome to my homepage</h1>
    <p>My name is Donald Duck</p>
	</header>

nav 定义导航

<nav> 导航</nav>

footer 定义页脚标签

  <footer></footer>

article定义文章

<article></article>

section定义区域

	<section></section>

aside 侧边

<aside></aside>

datalist

<input type="text" name="" list="data">
<datalist id="data">
	<option>111</option>
	<option>222</option>
	<option value="">333</option>
	<option value="">444</option>
</datalist>

fieldset 分组

<fieldset>
			<legend>1111</legend>
			<legend>2222</legend>
			用户:
</fieldset>

html5新增的input type

input type 属性作用
email邮箱
tel手机
number数字
urlurl
search搜索
range区域
time小时分钟
datetime时间
month月年
week星期
color颜色
	       邮箱:<input type="email" name="">
			手机:<input type="tel" name="">
			数字:<input type="number" name="">
			url:<input type="url" name="">
			搜索:<input type="search" name="">
			区域:<input type="range" name="">
			小时分钟:<input type="time" name="">
			年月日  :<input type="date" name="">
			时间:<input type="datetime" name="">
			月年:<input type="month" name="">
			星期  年:<input type="week" name="">
			颜色:<input type="color" name="">

html5新增的input 属性

属性作用
placeholder占位
autofocus自动聚焦
multiple多文件上传
autocomplete自动记录
required不为空
accesskey快速定位光标
		<input type="text" name="" placeholder="8888">
		<input type="text" name="" autofocus="autofocus">
		<input type="file" name="" multiple="multiple">
        	自动记录:	<input type="text" name="777" autocomplete="autocomplete">
			<input type="submit" name="" value="提交">
            <input type="text" name="" required>
            <input type="text" name="" accesskey="s">

多媒体标签

插入视频

<embed width="400" height="400" we
	 src="https://www.bilibili.com/video/av58485737?spm_id_from=333.334.b_686f6d655f706f70756c6172697a65.3"></embed>
<video controls autoplay width="500">
		<source src="../file/music.mp3" type="">
</video>

插入音频

<audio src="../file/music.mp3"  controls="controls" loop="-1" autoplay="autoplay"></audio>

兼容

<audio controls loop="-1">
		<source src="../file/music.mp3" type="">
			<source src="../file/music.ogg" type="">
				//不支持
	</audio>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值