前端学习笔记(一)—— 常用HTML标签
前言
接触前端开发也有些时间了,现在想把自己在前端开发和工作中所学到的、有用的知识在此以笔记的形式记录下来,给有需要的童鞋借鉴学习。当然,个人能力和技术有限,文章中可能出现错误或不足的地方,还望童鞋们不吝指教,我定及时修改
h1-h6:标题标签,从h1到h6字体大小依次减小,h1代表页面最重要的标题,最好一个页面只使用一次。效果如下:
一级标题
二级标题
三级标题
四级标题
五级标题
六级标题
p:段落标签
<p>这是一个段落</p>
这是一个段落
br:换行标签
<span>这是一段内容</span><br/><span>这是另一段内容,通过br进行了换行</span>
这是一段内容
这是另一段内容,通过br进行了换行hr:水平线
下面是一条水平线
b、i、u、s、strong、em、ins、del
功能/意义 视觉标签 语义化标签 加粗 b strong 倾斜 i em 下划线 u ins 删除线 sdelul、li:无序列表
- 这是无序列表第1段内容
- 这是无序列表第2段内容
- 这是无序列表第3段内容
ol、li:有序列表
- 这是有序列表第1段内容
- 这是有序列表第2段内容
- 这是有序列表第3段内容
dl、dt、dd:自定义列表
- 这是自定义列表第1-1段内容
- 这是自定义列表第1-2段内容
- 这是自定义列表第1-3段内容
- 这是自定义列表第2-1段内容
- 这是自定义列表第2-2段内容
- 这是自定义列表第2-3段内容
img:图片标签
此处引入一张图片
<img src="https://csdnimg.cn/feed/20180627/c32455a85d4ca16df211e812e67ab432.jpg" alt="图片未加载出来时的说明" title="鼠标悬停在图片时出现的文字"/>
说明:该标签常用有三个属性- src : 图片地址
- alt :图片未加载出来时的说明
- title :鼠标悬停在图片时出现的文字
a:锚链接
作用:实现地址跳转
示例:https://github.com/Marco-hui
属性:- href:超链接跳转的路径
- target:规定跳转方式, _self(默认值,当前窗口打开),_blank(新窗口打开)
- table:表格
tr :行 td:列(单元格)
<table border="1" cellspacing="0" cellpadding="0" width="200" height="100" bgcolor="#f60">
<tr>
<td colspan="2">1-1</td>
<td>1-3</td>
</tr>
<tr>
<td rowspan="2">2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
上面代码效果如下:
1-1 1-3 2-1 2-2 2-3 3-2 3-3 其中,对里面涉及的属性进行说明:
- border:给表格加边框
- cellspacing:单元格与单元格之间的间距
- cellpadding:单元格的内填充,内容与边框之间的间距
- width:给表格定宽度
- height:给表格定高度
- bgcolor:表格背景颜色
- colspan:合并单元格的列,加在td上
- rowspan:合并单元格的行加在td上
form:表单
作用:向服务器传输数据,收集用户信息
属性:
- action:表单提交到的后台地址
- method:提交的方式,get和post
- name:给表单起名字input:表单控件
属性:
- type:表单类型
– 属性值:
text(文本框)
password(密码框)
radio(单选框)
checkbox(多选框)
reset(重置按钮)
submit(提交按钮)
button(普通按钮) - value:表单框里的内容
- name:给表单命名
- checked:设定默认选中项
- type:表单类型
select:下拉列表
option:选项<select name="sel"> <option value="1" selected>1</option> <option value="2">2</option> </select>
value:选项值
selected:默认选中项textarea:文本域
<textarea name="area" cols="30" rows="10"></textarea>
cols:列数
rows:行数div:块级元素的代表
- span:行内元素的代表
以上为HTML常用标签,由于文章主要是笔记形式,所以没有详细讲解其用法、作用及其属性、属性值。有需要的童鞋可另行查询资料!