您的位置：首页 > Web前端 > HTML

html回顾总结

2020-07-19 04:08 411 查看

前言Sublime3快捷方式

生成html骨架：!+TAB 或者 html:5 +TAB
html:xt +TAB   含版本信息的骨架

生成标签：标签名 +TAB   如 div +TAB
生成多个标签：div *10 +TAB

子属关系ul >li*2  +TAB
输出结果：<ul>
<li></li>
<li></li>
</ul>
兄弟关系：div+p +TAB
<div></div>
<p></p>

类调用.red +TAB
<div class="red"></div>

空格：&nbsp;

<!DOCTYPE html> 文档类型
<meta chartset=”UTF-8”>  字符集

排版标签

头部、标题标签：<h></h>
段落标签:<p></p>
水平线标签:<hr />
换行标签：<br />
布局标签：<div></div>   <span></span>

文本格式化标签：
粗体:<b></b>			<strong></strong>
斜体:<i></i> 		<em></em>
加删除线：<s></s>		<del></del>
加下划线：<u></u>		<ins></ins>

图像标签:<img src=”图片url”
alt=”文本#图片未显示替换文本”
title=”文本#鼠标悬停时显示的内容”
width=“像素#设置图像高度”
height=“像素#设置图像的高度”
border=“数字#设置图像边框的宽度” />

链接标签：<a href=”跳转网页url 或者#”
target=“目标窗口的呈现方式（_blank，_self）”>
文本或者图像</a>

锚点定位：目录跳转
<a href=“#live”>我是目录</a>
..........................
<h id=“live”>跳转目录对应标题</h>

Base标签: 设置整体链接打开状态
<base / target=”_blank”>

注释标签：<!--注释内容-->

特殊字符标签：

列表标签
无序列表:
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>

有序列表:
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>
自定义列表:
<dl>
<dt>实数</dt>
<dd>小数</dd>
<dd>整数</dd>
<dt>虚数</dt>
<dd>复数</dd>
</dl>

表单标签：<input />
单行文本输入框：<input  type=”text” />
密码输入框：<input type=”password”  maxlength=”6” />
单选按钮：<input type=”radio”	name=”sex”	checked=”checked” />男
//name表示同一类型（sex）单选，checked=”checked”表示默认（男）
复选框：<input type=”checkbox” />

按钮组：
普通按钮：<input type=”button”  value=“搜索”/>
提交按钮：<input type=”submit” value=”提交表单” />
重置按钮：<input type=”reset” value=”重置表单” />
图像按钮：<input type=”image” src=”img.png” />
文件按钮（文件上传）：<input type=”file” />

lable 标签
<lable > 用户名 <input type=”text” value=”点用户名进入输入搜索框” /></lable>

<lable for=“first”> 用户名 <input type=”text” value=”点用户名也可以进入输入搜索框”  id=“first”/></lable>
//如果lable里面有多个表单，想定位到另外几个，可以通过for   id 的格式来进行

文本域
<textarea  cols=“每行字数” rows=“显示的行数”>请输入留言</textarea>

<p>留言板<textarea name="content"></textarea></p>

下拉菜单
<select>
<option>北京</option>
<option>上海</option>
<option	selected=“selected”>重庆</option>
//selected表示默认选中（重庆）
</select>

表单域
<form action=”xxx.php” method=”post” name=”user_information”>
</form>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航