HTML基本知识点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>html</title>
	</head>
	<body>
	<!--
    	这是注释
    -->	
    <br />
    <a name="top"></a>
    <p align="center">这是段落</p>
    <h3>这是段落</h3>
    <b>定义粗体文本</b>
    <i>定义斜体文本</i>
    <del>定义删除文本</del>
    <sup>定义上标字</sup>
    <sub>定义下标字</sub>
    <br />
    <a href="http://www.baidu.com" target="_blank" >定义超链接,这是外链接</a>
    <br />
	<a href="img/QQ截图20170824152024.jpg" target="_parent">这是内链接</a>    	
    <br />
    <a href="sms:18621190432">它还可以链接邮箱、拨打电话、发送短信</a>	
    <br />
    <!--  它还可以作为锚点,例如网页中的top按钮  -->
    <a href="#top">top(#位置名)</a>	
    <br />
    <!--
		下面是img,img的常用属性: src,width,height,alt
		地址最好写为相对路径, ../表示回到上一层目录 ./表示当前目录
    -->
    <img src="img/铅笔.jpg" width="100" height="100" alt="这是替代文字" />
    <br />
    <!--
		列表分为无序列表和有序列表,它的常用属性为type
		有序列表格式: <ul><li></li></ul>
		type为disc:实心原点,circle:空心圆,square:长方形
		
		有序列表格式: <ol><li></li></ol>
		type为1,a,A,i,I用来设置项目前面的标记
		此外还有start属性,设置排序的起点数值
    -->
    <ul type="square">
    	<li>苹果</li>
    	<li>香蕉</li>
    	<li>鸭梨</li>
    </ul>
    <ol type="I" start="10">
    	<li>苹果</li>
    	<li>香蕉</li>
    	<li>鸭梨</li>
    </ol>
    <br />
    <!--
		定义列表
    -->
    <dl>
    	<dt>一</dt>
    		<dd>二</dd>
    	<dt>一</dt>
    		<dd>二</dd>
    		<dd>二</dd>
    </dl>
    <br />
    <!--
    	HTML实体字符,一个字符实体包含三个部分:
    	&  实体名  ;
    	实体名大小写敏感!
    -->
	空格   空格
	<!--
		表格
		与表格相关的标签
		<caption>        定义表格标题
		<col>      定义列
		<colgroup>   定义表格列的分组
		<table>      定义表格
		<tbody>     定义表格主体
		<td>      定义一个单元格
		<tfoot>    定义表格的表注(底部)
		<th>      定义表格表头
		<thead>    定义表格的表头
		<tr>      定义行
		
		属性说明:
		属性                    值                                  说明
		width                 px、 %           指定表格的宽度    
		height                px、%             表格的高度
		border              	px           指定表格边框的宽度
		cellpadding             px        指定边框与内容之间的空白                           
		cellspacing           px、 %         指定单元格之间的空白                  
		align           left、right 、center 指定表格的对齐方式                  
		valign          top、middle 、bottom   垂直排列方式
		colspan                列数                        合并列单元格
		rowspan                行数                        合并行单元格
		bgcolor               颜色值                         表格背景色
		background             图片         表格背景图
		bordercolor         颜色值                     表格边框颜色 
    -->
    <table border="1">
		<th>表头</th>
		<th>表头</th>
		<tr>
    		<td>row 1,cell 1</td>
    		<td>row 1,cell 2</td>
    	</tr>
    	<tr>
    		<td>row 2,cell 1</td>
    		<td>row 2,cell 2</td>
    	</tr>
    </table>
    <br />
    <!--
		内嵌框架
		语法: <iframe src="URL" name="框架名"></iframe>
		常用属性: width,height,scrolling(是否显示滚动条),frameborder(是否显示边框)
    -->
    <iframe src="http://www.baidu.com" name="baidu" height="300" width="300" frameborder="0" scrolling="auto"></iframe>
	<br />
	<!--
		form表单,表单主要负责获取用户填写的数据,并通过浏览器向服务器传送数据。
		表单常用属性:
		属性                     说明
		name        表单的名称
		action     表单提交地址
		method   表单数据提交的方式 (get:在url地址上面传送参数到服务器,post:在后台传送参数到服务器)
		enctype      MIME类型               
		target   打开方式(_blank:在一个新的窗口打开 _self:在相同的框架中调入文档 _top:把文档调入原来的最顶部的浏览器窗口中)
    -->
    <form>
    	用户名:<input type="text" name="userName" />
    	密码:<input type="password" name="psw" />
    </form>
    <br />
    <!--
		form---文本域
		文本域通过<input type="text"> 标签来设定,
		当用户要在表单中键入字母、数字等内容时,就会用到文本域。
		文本域的缺省宽度是20个字符
		属性                  说明
		type     input元素类型                           
		name     input 元素的名称
		value    input 元素的值
		size     input 元素的宽度
		readonly    是否只读
		maxlength 输入字符的最大长度
		disabled    是否禁用
		
		form---密码字段
		密码字段通过标签<input type="password"> 来定义
		密码字段字符不会明文显示,而是以星号或圆点替代。
		属性                  说明
		type      input元素类型                          
		name      input 元素的名称
		size      input 元素的宽度
		maxlength 定义最多输入的字符数
    -->
    <br />
    <!--
		form---单选按钮
		name属性:定义单选框的名称,要保证数据的准确获取,
		单选框都是以组为单位使用的,在同一组的单选按项要用同一个名称。
		checked可以将其定义为缺省值
		form---复选按钮
		和单选按钮差不多,只是可以选择多个
    -->
    <input type="radio" name="sex" value="男" checked="checked" />男
    <input type="radio" name="sex" value="女" />女
    <br />
    <input type="checkbox" name="like" value="吃饭" />吃饭
    <input type="checkbox" name="like" value="睡觉" />睡觉
	<br />
	<!--
		form---提交按钮
    -->
	<input type="submit" />
	<br />
	<!--
		form---隐藏域
		隐藏域用于在程序发送没有必要让用户看到特定值的时候使用。
    -->
    <input type="hidden" name="隐藏" value="10" />
    <br />
    <!--
		上传文件
		注意:
		利用这项功能时,在 form 标签中要指定method属性。
		要把method 指定为post, enctype属性指定为 multipart/form-data。
    	multiple     控制是否上传多文件
    -->
    <input type="file" name="f" multiple="multiple" />
    <br />
    <!--
		textarea:多行文本域
		属性                     说明
		name                   元素的名称
		rows                指定文本框的高度
		cols                指定文本框的宽度
    -->
    <textarea name="多行文本" rows="5" cols="20" ></textarea>
    <br />
    <!--
		form---简单下拉框
		属性                   说明
		name               下拉列表框的名称        
		size            下拉列表框的显示行数
		multiple             是否多选
		disabled             是否禁用
		selected          设置默认选中的选项
		value                 选项值
		lable 标签的作用是将输入项或选项及其标签文字关联起来。
    	optgroup(表单元素:下拉框分组)
    -->
    <select name="sel">
    	<option value="">默认选项</option>
    	<option value="1">选项一</option>
    	<option value="2">选项二</option>
    	<option value="3">选项三</option>
    </select>
    <br />
    <!--
		音频
		不同浏览器会对音频的兼容性不同,所以最好是在属性type中指明其类型
		属性说明:
		autoplay     如果出现该属性,则视频在就绪后马上播放。
		controls     如果出现该属性,则向用户显示控件,比如播放按钮。
		loop         如果出现该属性,则当媒介文件完成播放后再次开始播放。
		muted        规定视频的音频输出应该被静音。
		poster       URL 规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像。
		preload      如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果 使用 "autoplay",则忽略该属性。
		src url      要播放的视频的 URL。
		width        设置视频播放器的宽度。
		height       设置视频播放器的高度。
    -->
    <audio src="音乐.mp3" controls="controls"></audio>
    <!--
		视频
		基本格式:<video src="4.ogv" controls ></viedo> 
		其属性与音频类同。
    -->
    <video src="shipin.wmv" controls="controls"></video>
	</body>
</html>

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值