HTML标签总结

1. HTML常用标记:属性值需要带等号连接,属性值需要带引号(单、双引号都可以

  1. 文本标题:h1~h6
    i. h1:一般应用在网页文章标题,网站的logo处
    ii. h2:新闻稿件的标题,或者是二级标题处
    iii. h3:新闻稿件居多,布局元素中有加粗效果
    iv. h4~h6:根据实际情况选择应用
  2. 段落文本:p
  3. 空格:   (能够实现空出一个字符)
  4. 换行:<br/>
  5. 水平线:<hr/>
  6. 加粗:
    i. <b>加粗的内容</b> 只是显示加粗
    ii. <strong>强调的内容</strong> 突出的文本
  7. 倾斜:
    i. <em>强调文本</em>
    ii. <i>倾斜文本</i>
  8. 扩展:
    i. <u></u> 下划线
    ii. <del></del> 删除线
    iii. <s></s> 删除线
    iv. <sub></sub> 下标
    v. <sup></sup> 上标
  9. 列表:
    ? 无序列表
    * type取值:
    ? disc:默认值,黑色实心圆点
    ? circle:圆环,空心圆
    ? square(广场):正方形,黑色实心
    ? none:取消列表项
    ? none和0的区别:0代表右值,值为0
			<ul>
				<li></li>
				<li></li>
				………......
			</ul>
	? 有序列表:
			? type:改变排序格式1/a/A/i/I
			? start:改变列表项的起始
		□ 
<ol>
				<li></li>
				<li></li>
				………......
			</ol>
	? 自定义列表
			? 一般应用在:问答列表,图文混排布局区域
		□ 
<dl>
				<dt>名词</dt>
				<dd>解释</dd>
				……….
			</dl>
  1. 有序列表的属性
    a. type:规定列表中的列表项目的项目符号类型
    i. 语法:<ol type="a"> </ol>
    1 数字顺序的有序列表(1,2,3,4)
    a 字母顺序的有序列表,小写(a,b,c,d)
    A 字母顺序的有序列表,大写(A,B,C,D)
    i 罗马数字,小写(i,ii,iii,iv)
    I 罗马数字,小写(I,ii,iii,iv)
    b. start属性规定有序列表的开始点
    i. 语法:<ol start="5"> <ol>
  2. 插入图片
    a. <img src="目标文件路径" " alt="图片替换文本" title="图片标题" width="宽度" height="高度">
    i. 字符:./ 代表当前页面
    b. title的作用:图片的标题,当鼠标悬停在图片上时一个小提示,鼠标离开就消失,title属性就是专门做提示信息的
    c. alt的作用:提示文本 必写;alt属性是在你的图片由于某种原因不能加载时显示的文字的提示信息,会直接输出在图片的位置
  3. 超链接
    a. <a href="#" title="超链接的title" target="_black">在新的页面打开</a>
    b. 属性
    i. target:页面的打开方式
    1) 默认属性值是_self
    2) 在新的页面打开_blank
    ii. title:提示文本
  4. 数据表格的作用及组成
    a. 作用:显示数据
<table width="value" height="value" border="value">
		<tr>
			<td></td>
			<td></td>
		</tr>
	</table>
注:一个tr表示一行,一个td表示一列的一个单元格
b. 
c. 行分组:
		<thead>表头</thead>
		<tbody>表体必须存在的标签</tbody>
		<tfoot>表尾</tfoot>
	i. 说明:一个Table中,只能含有一个thread,一个tfoot,但可以包含多个tbody,tbody标签是写表格时必备的标签。
d. 合并单元格属性:
	i. colspan="所要合并的单元格的列数"合并列
	ii. rowspan="所要合并单元格的行数"合并行
  • 表单的作用及组成:

  • a. 表单的作用:用来收集用户的信息的
    b. 表单的组成:表单框(表单域form)、提示信息、表单控件/表单元素
    i. 表单框

<form action="表单提交的地址" name="表单的名称(英文字母开头的)"method(提交方式)="GET/POST"></form>
	ii.  文本框
<input type="text" value="默认值" maxlength="5" placeholder="提示文本">
	iii. 密码框
<input type="password" placeholder="密码">
  • c. 按钮
    1) 提交按钮
<input type="submit" value="按钮内容"> 配合form的action属性能实现跳转
    1. 重置按钮
<input type="reset" value="重置">
    1. 普通按钮

      button:没有功能,需要配合js搭配使用

    1. 图像按钮
      image:不显示图片时,实质上就是一个提交按钮,能实现跳转。
    1. 特殊的按钮
      双标签button按钮,它能配合form实现跳转
      i. 单选框/单选按钮


      单选按钮里的name属性必须写,同一组单选按钮的name属性值必须一样
      ii. 复选框



      复选按钮里的name属性必须写,同一组复选按钮的那么属性值必须一样
      checked="checked" 表示默认被选中,可简写成checked
      disabled="disabled" 表示禁用,可简写disabled
      enabled:可用状态
      iii. 下拉菜单
				<select name="">
				<option name="" value="表单被提交时被发送到服务器的值" selected="selected">菜单内容</option>
				<option value="">1</option>
				<option value="">1</option>
				<option value="">1</option>
				<option value="">1</option>
			</select>
	iv. 文本域(多行文本框)
<textarea name="" id="" cols="30" rows="10"></textarea>
			cols:字符宽度        rows:行数
	v. 跳转按钮(多和js搭配使用)
<input name="" type="button" value="123">
			<button></button>
	vi. button和submit的区别是:
		submit是提交按钮起到提交信息的作用,type类型是button只起到跳转的作用,不进行提交
  • 上传文件框

文件域:

<input type="file" name="" id="">
	viii. 图像域:
<input type="image" src="" alt="上传图片" width="100" height="100">
	ix. 隐藏文本框
<input type="hidden" name="" value="值">上传隐藏的值/字段
	提示信息标签:将提示信息及相应的表单控件进行关联 
<label for="user">提示信息</label>
		<input type="text" name="" id="user">

HTML标签总结

上一篇:http - tcp三次握手


下一篇:如何在 Node.js 中流式处理大 JSON 文件