Html基础知识学习总结

Html基础标签

<h1></h1>:标题
<p></p> 段落
<hr>水平线
<br>换行
<span></span>分区，可多标签一行
<div></div>分区，每个标签一行

文本格式化标签

加粗
斜体
删除
</ins 下划线

图像标签

<img src=”图片url”>
<img/>属性

  • alt 图片不能显示时的替代文本
  • title 鼠标悬停时显示
  • height 图像高度
  • width 图像宽度
  • border 图像边框宽度

超链接标签


href =url 链接的地址
target _blank 新窗口打开

  • <base> <base target="_blank"> 设置超链接的共有属性

预格式化文本

<pre> </pre> 预格式化文本

保留空格与换行

常用特殊字符

1
2
3
4
5
空字符      &nbsp;
注册商标    &reg;
<		    &lt;
>			&gt;	
&    		&amp;

表格

表格数据格式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<body>
<!-- 表格标签-->
	<table border="1">
		<!--表格标题标签 即表头-->
		<caption>表格标题</caption>
		<!--行标签-->
		<tr>
			<!--表头单元格,文字居中且加粗-->
			<th></th>
		</tr>
		<tr>
		<!--单元格标签-->
			<td></td>
		</tr>
	</table>
</body>

表格属性

border 边框
width 宽度
height 高度
align 设置表格在网页中水平对齐方式

  • left
  • center
  • right
  • cellspacing 单元格与单元格之间距离
  • cellpadding 单元格内容与边框的距离

合并单元格

行

rowspan=”合并单元格的个数 “

列

colspan=”合并单元格个数”

合并的方式

  1. 先确认跨行还是跨列
  2. 根据 先上 后下 先左 后右的原则找到目标单元格 ，然后写上合并方式 和合并数量
  3. 删除多余的单元格

语义化结构划分

1
2
3
4
<thead></thead> 表的头部   内部必须拥有<tr>标签
<tbody></tbody> 表的主体
<tfoot></tfoot> 表的末尾
 注意：结构不是必须的   即使不写，绝大多数浏览器在解析的时候，都会智能的给你加上

列表

分类

  1. 有序列表
    1. 无序列表
      • 自定义列表

      有序列表

      1
      2
      3
      4
      5
      6
      <ol>
          <li>列表项</li>
          <li>列表项</li>
      </ol>
      注意：实际中很少使用有序列表，在做一些列表的时候，大家都比较喜欢使用无序列表。因为ul标签里面只能嵌套li标签
      	一般在使用列表的时候都会去除别表的默认样式，再根据自己的需求去使用css  js  去定制自己需要的样式和交互

      无序列表

      1
      2
      3
      4
      5
      6
      <ul>
      	<!--ul内只能嵌套li-->
      	<li>列表项1 </li>
      	<li>列表项2</li>
      </ul>
      注意：一般的列表，都喜欢使用 无序列表

      自定义列表

      1
      2
      3
      4
      5
      6
      7
      8
      <dl>
      	<dt>名词</dt>
      	<dd>名词的解释1</dd>
      	<dd>名词的解释2</dd>
      	<dt>名词2</dt>
      	<dd>名词2的解释2<dd>
      </dl>
      注意：自定义标签一般都用在页面结尾的友情链接部分  就是  页面的 footer部分

      表单

      这里写具体的表单标签 // from表单用于提交数据 有action method name属性

      表单标签

      标签

      • 语法
        <input type="属性值"/>
      • 属性值
        • type
        • text 单行文本输入框
        • password 密码输入框
        • radio 单选按钮
        • checkbox 复选框
        • button 普通按钮
        • submit 提交按钮
        • reset 重置按钮
        • image 图像形式的提交按钮
        • file 文件域
        • name 控件的名称
        • value input控件中的默认文本值
        • size input控件在页面中的显示宽度
        • checked 表示默认选中状态

      <label></label>标签

      <textarea></textarea> 文本域

      select下拉列表

      1
      2
      3
      4
      5
      6
      <select>
      	<option>--请选择--</option>
      	<!--添加默认选中项-->
      	<option　 selected="selected">选项１</option>
      	<option>选项２</option>
      </select>

      注意：部分文章可能会在不就的将来更新

      如果能够帮助到你，是小编最大的荣幸

      当然 有 不好的地方 请大家帮忙指出 学习永无止境

      小编一直认为 人外有人 天外有天 一起学习 共同进步

      让我们共同加油吧！！！