码迷,mamicode.com
首页 > Web开发 > 详细

前端——html

时间:2020-03-28 23:14:47      阅读:90      评论:0      收藏:0      [点我收藏+]

标签:特殊字符   只读   doctype   信息   大于   配置信息   文档   网页   val   

HTML

html文档

<!DOCTYPE html>
<html lang=‘en‘>
<head>
	<meta charset=‘utf-8‘>
	<title>		</title>
</head>
<body>

</body>
</html>

html标签

自闭标签	<meta >
非自闭		 <a href=‘‘> </a>

标签分类

内敛标签(行内标签):
	自身不独占一行
	只能嵌套内敛标签
		如:b/i/u/s/button/span/ima/a
块级标签(行外标签):
	自身独占一行
	可以嵌套内敛标签与某些块级标签
		如:h1~6/br/hr/p/div

head中的标签

<title></title>		定义网页的标题
<meta />		定义网页的一些配置信息

body中的基本标签

<b></b>		加粗
<i></i>		斜体
<u></u>		下划线
<s></s>		删除线

<p></p>		段落标签,属块级标签

<h1></h1>	1级标签
<h2></h2>	2级标签
<h3></h3>	3级标签
<h4></h4>	4级标签
<h5></h5>	5级标签
<h6></h6>	6级标签,均为块级标签

<br/>		换行,块级标签
<hr/>		水平分割线,块级标签

img标签

img图片标签,内敛标签
	<img src=‘路径‘ title=‘鼠标悬浮提示‘ alt=‘加载失败提示‘ width=‘宽度‘ height=‘高度‘ >

a标签

a超链接标签,内敛标签
	<a href=‘http://www.baidu.com‘ target=‘_blank‘>百度</a>
	
	
	属性href:超链接路径
	属性target:是否新开窗口
		新开窗口:_blank
		自身窗口:_self

ul、ol标签

ul无序列表标签,块级标签
	<ul typt=‘none‘>
		<li>第一行</li>
		<li>第二行</li>
		<li>第三行</li>
	</ul>
	
ol有序列表标签,块级标签
	<ol type=‘a‘ start=‘3‘>
		<li>第一行</li>
		<li>第二行</li>
		<li>第三行</li>
	</ol>
	
	
	属性type:决定序列样式,如‘1‘表示数字序号,‘a‘表示小写字母序号等等
	属性start:决定序列序号从第几个开始

dl标签

<dl>
	<dt>标题</dt>
	<dd>内容第一行</dd>
	<dd>内容第二行</dd>
	<dd>内容第三行</dd>
</dl>
	
	标题与内容间有缩进

特殊字符

空格:	&nbsp;
小于号: &lt;
大于号: &gt;
&符号: &amp;
......

表格标签

table标签,块级标签
	<table border=‘1‘ cellpadding=‘10‘ cellspacing=‘10‘>
		<thead>
			<tr>
				<th>姓名</th>
				<th>年龄</th>
				<th>爱好</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>川普</td>
				<td>55</td>
				<td>吹牛</td>
			</tr>
		</tbody>
	</table>
	
	
	属性border:表格边框厚度
	属性cellpadding:表格中内容与框间距
	属性cellspacing:格与格之间的距离
	<tr></tr>表示一行
	<th></th>表示表头行中的一格
	<td></td>表示非表头行中的一格

form、input标签

form表单标签,块级标签,用于提交用户数据
input标签(自闭),内敛标签,拥有各种type用于各种用户交互

	<form action="数据提交路径">
		用户名:<input type=‘text‘/>
		
		密码:<input type=‘password‘/>
		
		日期:<input type=‘date‘/>
		
		男<input type=‘radio‘ name=‘sex‘ value=‘1‘/>
		女<input type=‘radio‘ name=‘sex‘ value=‘2‘ checked />
		
		篮球<input type=‘checkbox‘ name=‘hobby‘ value=‘a‘/>
		足球<input type=‘checkbox‘ name=‘hobby‘ value=‘b‘/>
		羽毛球<input type=‘checkbox‘ name=‘hobby‘ value=‘c‘ checked/>
		
		注册<input type=‘submit‘/>
		
		重置<input type=‘reset‘/>
		
		<button>普通按钮在form标签中同submit相同</button>
		
		隐藏输入框<input type=‘hidden‘/>
		
		文件上传<input type=‘file‘/>
		
	</form>
	
	
	input中
	属性checked:默认选中
	readonly:针对输入框只读,但数据可提交至后台
	disable:不允许对input标签操作,数据不可提交后台

select标签

select下拉选择框标签,内敛标签
	<select name=‘city‘ multiple>
		<option value=‘1‘>北京</option>
		<option value=‘2‘>上海</option>
	</select>
	
	
	属性multiple:允许ctrl多选

textarea标签

textarea多行文本输入框标签,内敛标签
	<textarea name=‘comment‘ id=‘comment‘ cols=‘20‘ rows=‘10‘>
	请输入评论
	</textarea>
	
	
	属性rows:行数(高度)
	属性cols:列数(宽度)
	属性disabled:禁用,不提交数据

label标签

label标识标签,用于对标签进行功能标识
方式1:
	<label for=‘username‘>用户名</label>
	<input type=‘text‘ id=‘username‘ name=‘name‘ value=‘张三‘> 
	
方式2:
	<label>
		密码:<input type=‘password‘ name=‘password‘ value=‘123456‘>
	</label>

前端——html

标签:特殊字符   只读   doctype   信息   大于   配置信息   文档   网页   val   

原文地址:https://www.cnblogs.com/lizhihang/p/12589853.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!