前端学习笔记

前端学习笔记

最后修改时间:6 months ago

html 基本结构

html标签是由<>包围的关键词

html标签通常成对出现,分为标签开头和标签结尾

有部分标签是没有结束标签的,为单标签,单标签必须使用/结尾

页面所有的内容,都在html标签中

html标签分为三部分:标签名称标签内容标签属性

html标签具有语义化,可通过标签名能够判断出该标签的内容,语义化的作用是网页结构层次更清晰,更容易被搜索引擎收录,更容易让屏幕阅读器读出网页内容

标签的内容是在一对标签内部的内容

标签的内容可以是其他标签

标签属性

class属性:用于定义元素的类名

id属性:用于指定元素的唯一id,该属性的值在整个html文档中具有唯一性

style属性:用于指定元素的行内样式,使用该属性后将会覆盖任何全局的样式设定

title属性:用于指定元素的额外信息

accesskey属性:用于指定激活元素的快捷键

tabindex属性:用于指定元素在tab键下的次序

dir属性:用于指定元素中内容的文本方向,属性只有ltrrtl两种

lang属性:用于指定元素内容的语言

文本标签

段落标签:<p></p>,段落标签用来描述一段文字

标题标签:<hx></hx>,标题标签用来描述一个标题,标题标签总共有六个级别,<h1></h1>标签在每个页面中通常只出现一次

强调语句标签:<em></em>,用于强调某些文字的重要性

更加强调标签:<strong></strong><em>标签一样,用于强调文本,但它强调的程度更强一些

无语义标签:<span></span>,标签是没有语义的

短文本引用标签:<q></q>,简短文字的引用

长文本引用标签<blockquote></blockquote>,定义长的文本引用

换行标签:<br/>

多媒体标签

链接标签:<a></a>

图片标签:<img/>

视频标签:<video></video>

音频标签:<audio></audio>

列表

无序列表标签:<ul></ul>列表定义一个无序列表,<li></li>代表无需列表中的每一个元素

有序列表:<ol></ol>列表定义一个有序列表,<li></li>代表无需列表中的每一个元素

定义列表:<dl></dl>,定义列表通常和<dt></dt><dd></dd>标签一起使用

表格

表格标签:<table></table>

表格的一行:<tr></tr>

表格的表头:<th></th>

单元格:<td></td>

表格合并:同一行内,合并几列colspan="2",同一列内,合并几行rowspan="3"

表单标签

1.标单标签<form>

<form></form>表单是可以把浏览者输入的数据传送到服务器端,这样服务器端程序就可以处理表单传送过来的数据信息:<form method="传送方式" action="服务器文件">

method:浏览者输入的数据被传送到的地方

action:数据传输的方式

2.输入标签<input>

name:为文本框命名,用于提交表单,后台接收数据用

value:为文本输入框设置默认值。

type:通过定义不同的type类型input的功能有所不同

url	        专门用于输入 url
file        上传文件
date	    选取日期和时间(还包含:month、week、time、datetime、datetime-local)
text        单行文本输入框
color	    选取颜色
email	    专门用于输入 e-mail
range	    显示为滑动条,用于输入一定范围内的值
radio       单选框 (checked属性用于显示选中状态)
reset	    重置按钮(点击按钮,会触发form表单的reset事件)
button      普通按钮
number	    专门用于number
submit	    提交按钮(点击按钮,会吃饭form表单的submit事件)
password    密码输入框(密码显示为***)
checkbox    复选框(checked属性用于显示选中状态)
1
2
3
4
5
6
7
8
9
10
11
12
13
14

button按钮:

<button type="button">我是Button按钮</button>
1

select下拉选择框:

<select>
  <option value = "请选择">请选择...</option>
  <option value = "选择1">选择1</option>
  <option value = "选择2">选择2</option>
  <option value = "选择3">选择3</option>
</select>
1
2
3
4
5
6

3.文本域:

<textarea rows="5" cols="20">
cols:规定文本区内的可见宽度 
rows:规定文本区内的可见行数
</textarea>
1
2
3
4

其他语义化标签

盒子:<div></div>

导航:<nav></nav>html5新增语义化标签,定义一个导航,主要用于布局,分割页面的结构

时间标签:<time></time>,语义化标签,定义一个时间

侧边栏:<aside></aside>,语义化标签,定义主题内容外的信息,主要用于布局,分割页面的结构

网页头部:<header></header>html5新增语义化标签,定义网页的头部,主要用于布局,分割页面的结构

底部信息:<footer></footer>html5新增语义化标签,定义网页的底部,主要用于布局,分割页面的结构

文章:<article></article>html5新增语义化标签,定义一篇文章,主要用于布局,分割页面的结构

- 更新中 -

留下一条留言?
默认颜色

主题颜色

标准颜色

更多颜色...