HTML5初探学习总结提高

Posted 2022-12-06 xj_love

一.Web标准及浏览器内核

Web标准：

1. 结构标准：结构对网页进行整理和分类，主要包括XML和html两个部分
2. 样式标准：表现用于设置网页元素的板式、颜色、大小等外观样式，主要是CSS
3. 行为标准：行为是指网页模型的定义及交互的编写，主要包括DOM和ECMAScript两个部分-JS

浏览器内核：

• Trident(IE内核)
• Gecko(firefox)
• webkit(safari)
• Chromium/Blink(chrome)
• Presto/Blink(Opera)

二.标签学习

-----1.排版标签-----

	<h1>标题1</h1>
	<h6>标题6</h6>
	<p>段落标签</p>
	<hr />水平线标签
	<br />换行标签
	<div>分区标签</div>
	<span>跨度，范围标签</span>

-----2.文本格式化标签-----

	<b>加粗</b>
	<strong>推荐加粗文字</strong>
	<br />

	<b>倾斜文字</b>
	<em>推荐倾斜文字</em>
	<br />

	<s>删除线文字</s>
	<del>推荐删除线文字</del>
	<br />

	<u>下划线文字</u>
	<ins>推荐下划线文字</ins>

-----3.图像标签-----

	<img src="image/timg.jpeg" alt="我是图片描述's" title="悬停文字" width="300" border="10" />
	<br />
	1.img 是单标签<br />
	2.src 属性是图片的必须属性，图片地址<br />
	3.alt 属性，当图片显示不出来时，会替换的文字<br />
	4.title 属性当鼠标悬停的时候，显示的文字<br />
	5.widht,height 宽高属性，一般只改其中一项就行，另一个会等比缩放<br />
	6.border 边框属性<br />

-----4.链接标签-----

<a href="http://www.baidu.com">百度</a> <br />
	<a href="test4.html" target="_self">图像标签</a> <br />

	1.href 要跳转的链接 <br />
	2.内部链接只需写上页面名称就可以了，别忘了后缀名<br />
	
	<h4>-----锚点定位-----</h4>
	<a href="#zhushi">定位注释标签</a>
	1.配合#，加id=<br />

	<h4>-----base标签-----</h4>
	base 单标签<br />
	1.head里面标注，_balnk，打开新的页面<br />
	2.单个链接里面用_self,当前页打开<br />

-----5.特殊字符标签-----

空格符：&nbsp;<br />
	小于号<：&lt;<br />
	大于号>：&gt;<br />
	和号&:&amp;<br />
	人民币￥:&yen;<br />
	版权©️:&copy;<br />
	注册商标®️:&reg;<br />
	摄氏度℃:&deg;<br />
	正负号±:&plusms;<br />
	乘号✖️:&times;<br />
	除号➗:&divide;<br />
	平方2(上标2)：&sup2;<br />
	立方3（上标3):&sup3;<br />	

-----6.列表标签-----

<h3>无序列表</h3>
	<p>喜欢的水果</p>
	<p>其它标签只可以写在li里面，li用ul包裹</p>
	<ul>
		<li>苹果</li>
		<li>香蕉</li>
		<li>榴莲</li>
	</ul>

	<h3>有序列表</h3>
	<p>喜欢的国家</p>
	<ol>
		<li>中国</li>
		<li>美国</li>
		<li>意大利</li>
	</ol>

	<h3>-----自定义列表-----</h3>
	<dl>
		<dt>定义标题</dt>
		<dd>定义描述、解释</dd>
	</dl>
	<p>------------------------</p>

	<h2>籍贯</h2>
	<dl>
		<dt>广州</dt>
		<dd>天河区</dd>
		<dd>海珠区</dd>
		<dd>黄浦区</dd>
	</dl>

-----7.表格-----

	<table border="1" cellspacing="0" cellpadding="5" width="500" height="250" align="center"> <!--- 表格标签 -->
		<caption>表格标题</caption>

		<thead> <!-- 表头部分，没有的就是主体部分-->
			<tr> <!-- 行标签 -->
				<th>姓名</th> <!--表头标签 第一行或第一列-->
				<th>性别</th>
				<th>年龄</th>
			</tr> 
		</thead>

		<tr>
			<td rowspan="2">跨行合并</td> <!--单元格标签,rowspan 跨行合并 删从下到上 -->
			<td>男</td>
			<td>18</td>
		</tr>
		<tr>
			<td colspan="2">跨列合并</td> <!--单元格标签,colspan 跨列合并 删从左到右 -->
		</tr>
	</table>

	<h3>-----注意事项-----</h3>
	<ul>
		<li>其它标签只能放td里面</li>
	</ul>

	<h3>-----表格属性-----</h3>
	<ol>
		<li>border 边框</li>
		<li>cellspacing cell单元格间距，默认2</li>
		<li>cellpadding 字和单元格距离，默认1</li>
		<li>align 表格在网页中的位置，默认left,有right,center</li>
	</ol>

-----8.表单和表单控件-----

<!-- 表单的目的： 手机用户信息<br/>
	表单域： 存放表单的区域，表表单控件里面的信息全部收集提交

	input表单控件
	1.input是个单标签 <input/>
	2.input可以通过type来改变形状样式 -->
	<hr>
	<h2>表单控件</h2>
	<h3>-----input-----</h3>
	<p><label>用户名：<input type="text" name="userNmae" value="2" maxlength="5"></label></p>
	<p>密&nbsp;码：<input type="password" name="mima" size="50"></p>
	<p>性别 ：男<input type="radio" name="sex"> 女<input type="radio" name="sex" checked=""></p>
	<p>普通按钮 <input type="button" name="" value="普通按钮"></p>
	<p>提交按钮 <input type="submit" name="" value="提交按钮"></p>
	<p>重置按钮 <input type="reset" name="" value="重置按钮" ></p>
	<p>默认复选框 <input type="checkbox" name="ch" checked=“ch”></p>
	<p>图片按钮 <input type="image" name="" src="image/wo.jpg"></p>
	<p>文件域 <input type="file" name=""></p>

	<hr>
	<h3>type</h3>
	<ul>
		<li>text     单行文本输入框</li>
		<li>password 密码输入框</li>
		<li>radio    单选按钮</li>
		<li>checkbox 复选框</li>
		<li>button   普通按钮</li>
		<li>submit   提交按钮</li>
		<li>reset    重置按钮</li>
		<li>image    图像形式的提交按钮</li>
		<li>file     文件域</li>
	</ul>
	<hr>
	<h3>其它</h3>
	<ol> 
		<li>name      用户自定义  控件的名称,name相同表示同一组</li>
		<li>value     用户自定义  input控件中的默认文本值</li>
		<li>size      正整数     input控件在页面中的显示宽度</li>
		<li>checked   checked   定义选择控件默认被选中的项</li>
		<li>maxlength 正整数     控件允许输入的最多字符数</li>
		<li>label     包住input  点击旁边也能进入输入框for,to来尽心定位</li>
	</ol>

	<hr>
	<h3>------文本域-----</h3>
	<p>留言板：</p>
	<textarea cols="50" rows="10"></textarea>

	<hr>
	<h3>------下拉菜单-----</h3>
	<p>籍贯：</p>
	<select>
		<option>点击选择省会</option>
		<option>北京</option>
		<option>广州</option>
		<option selected="selected">安徽</option>
	</select>
	<select>
		<option>点击选择城市</option>
		<option>中央</option>
		<option>天河</option>
		<option>安庆</option>
	</select>

	<hr>
	<h2>表单域</h2>
	<form action="demo.php" method="get" name="userInfo">
		<p>用户名：<label><input type="text" name="name"></label></p>
		<p>密码： <label><input type="password" name="pwd"></label></p>
		<br>
		<input type="submit" name="" value="提价">
		<input type="reset" name="" value="重置">
	</form>

-----9.新增标签-----

<header>定义页面的头部 页面</header>
	<nav>语义：定义导航栏</nav>
	<footer>语义：定义底部</footer>
	<article>语义：文章</article>
	<section>语义：定义区域</section>
	<aside>语义：定义其所内容之外的内容 侧边</aside>

	<input type="text" value="输入明星" list="star">
	<datalist id="star">
		<option value="谢军"></option>
		<option value="刘德华"></option>
		<option value="张学友"></option>
		<option value="吴彦祖"></option>
	</datalist>
	<br>
	<br>

	<fieldset>
		<legend>用户登录</legend> <!-- 定义标题 -->
		用户名：<input type="text" name="">
	</fieldset>

	<fieldset>
		<legend>HTML5新增的input type 类型 那些表单</legend>
		<form action="">
			邮箱：<input type="email" placeholder="请输入" autofocus="autofocus"><br> <!-- autofocus自动获得焦点 -->
			手机：<input type="tel" name="" required="required"><br>  <!-- required必填项 -->
			数字：<input type="number" autocomplete name="name"><br> <!-- autocomplete记住输入 -->
			url:<input type="url" name=""><br>
			搜索：<input type="search" name="" accesskey="s"><br> <!-- accesskey快速定位光标 -->
			区域滑块：<input type="range" name=""><br>
			时间:<input type="time" name=""><br> <!-- 小时分钟 -->
			年月日：<input type="date" name=""><br> <!-- weak，month,datetime -->
			颜色：<input type="color" name=""><br>
			上传头像：<input type="file" multiple="multiple">	<br>
			<input type="submit" name="">
		</form>
	</fieldset>

-----10.音视频播放-----

<h3>播放网络视频（大型，网址）</h3>
	<embed src="https://v.youku.com/v_show/id_XMzgyMjExNTM5Ng==.html?spm=a2h0j.11185381.listitem_page1.5~A"></embed>

	<h3>播放音频</h3>
	<audio src="vedio/报备提示.mp3" autoplay="autoplay" controls="controls" loop="-1"></audio>
	
	为了浏览器兼容，我们需要做三种声音文件 ogg mp3 wav
	<!-- <audio controls autoplay>
		<source src="">
		<source src="">
	</audio> -->

	<h3>播放视频(小的）</h3>
	支持ogg,mp4,webM 三种视频格式
	<video src="vedio/mp4.mp4" autoplay controls></video>

-----11.路径-----

<h4>1.-----相对路径-----</h4>
	1.同级路径 直接引用<br />
	<img src="img.png"><br />
	2.下一级路径 用反斜杠/来进入<br />
	<img src="image/img.png"><br />
	3.上一级路径 用../表示 <br />
	<img src="../img.png">><br />

	<h4>-----2.绝对路径-----</h4>
	1.文件的实际位置路径，不建议用
	2.文件的网址路径