前端学习笔记整理一 HTML

最新推荐文章于 2024-07-20 13:07:26 发布

hot_cool

最新推荐文章于 2024-07-20 13:07:26 发布

阅读量600

点赞数 3

分类专栏：个人学习笔记 HTML 文章标签：前端 web前端前端基础知识 html结构

本文链接：https://blog.csdn.net/hot_cool/article/details/73549417

版权

个人学习笔记同时被 2 个专栏收录

22 篇文章 0 订阅

订阅专栏

HTML

2 篇文章 0 订阅

订阅专栏

参考个人文章：http://www.zhuzhuman.com/nav-1/type-4/article/4.html

web前端:

1.HTML(网页内容载体 Hypertext Markup Language)，网页的结构层(骨架)。

2.CSS(网页外衣 Cascading styles sheets)，网页表现层(样子)。

3.JS(实现网页上的特殊效果和逻辑 JavaScript)，网页行为层(行为)。

1-1.认识html结构

<!DOCTYPE html> 
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>举个例子</title>
	<meta name="keywords" content="关键字" /> 
	<meta name="description" content="此网页描述" /> 
</head>
<body>
	网页在浏览器显现的区域
</body>
</html>

1. DOCTYPE是document type(文档类型)的简写，在web设计中用来说明你用的XHTML或者HTML是什么版本，<!DOCTYPE html> 是最简洁写法。

2. <html lang="en">...</html> html标签，标签里面包含body、head等标签。lang=“en“用来告诉浏览器这是一个英文页面，也可以为lang="zh"或lang="zh-CN"表示中文网页。

3. <head>...</head> head标签，里面常放meta、title、link、style、script等标签。一般用来放标题、关键字、css、js等内容。

4. <meta charaset="UTF-8" ,声明你的编码语言格式，utf-8支持中文。

5. <title>...</title> title标签。网页的标题。即平常打开的网页窗口的名字。

6. <body>...</body> body标签，网页主要显示区域。里面用来放要在网页上显示的内容。

1-2.认识html里面的标签

1-2-1 标签书写分类：

1. 成对出现的标签：<html></html>、<head></head>、<body></body>、<p></p>....等等

这些标签是以</标签名>为闭合标签，标签中间写相应内容。

2. 单标签：<meta />、<br/>、<link />、<input />...等，

这些标签是单标签，使用时为了规范尽量要加 / 。单标签一般通过标签属性来添加相应功能。

1-2-2 代码注释

1. html代码注释：

2. css代码注释：

/*注释内容*/

3. js代码注释：

单行代码注释：//注释内容；

多行代码注释：/*多行代码*/。

1-2-3 标签介绍(红色为常用标签)

1.body标签：

<body>...</body>放网页要展示的内容。

2.p标签：

<p>...</p>段落标签，添加段落，有默认样式。

3.<h1></h1> →<h6></h6>标题标签，

从h1到h6越来越小，有默认样式。

4.strong、em标签：

强调标签<strong></strong> 加粗；<em></em>斜体。

5.span标签：

<span>...</span>默认没任何样式，单可以用css控制里面内容的样式。

6. q标签：

<q>...</q>短文本引用。显示会给标签内容加双引号。

7. blockquto标签：

<block>...</block>长文本引用标签。有默认样式，段落前后缩进。

8. br标签：

<br/>换行标签。

9.  标签：

空格符每写一个只代表一个空格，

10. hr标签：

<hr/>添加水平横线有默认样式。

11. adress标签：

<adress></adress>一般写地址，邮件，签名，身份等(语义化)，默认斜体。

12. code、pre标签：

<code>...</code>引入一行代码。<pre></pre>引入多行代码。

13.ul、ol、li 标签：

<ul><li></li><ul> 无序列表，默认样式为每个li前为小黑点。<ol><li></li><ol> 有序列表，默认样式为每个li前为数字。

<ul> <!-- 无序列表 -->
	<li></li>
	<li></li>
</ul>
<ol> <!-- 有序列表 -->
	<li></li>
	<li></li>
</ol>

14. dl、dt、dd 标签：

定义列表 <dl> <dt>列表标题</dt> <dd>列表项</dd> </dl>

<dl>
	<dt>列表标题</dt>
	<dd>列表项1</dd>
	<dd>列表项2</dd>
</dl>

15. div 标签：

<div></div> 最常用的标签，常用于布局排版。

16. table、caption、thead、tbody、tr、th、td：

background背景图片，bgcolor背景色，cellpadding文本到单元格边框距离，cellspacing单元格到表格边框距离

<table id="mytable" summary="表格简介文本">
	<thead>
		表头
	</thead>
	<caption>标题文本</caption>
	<tbody>
		<tr> <!-- 第一行(标题行) -->
			<th>第一列的标题</th>
			<th>第二列的标题</th>
		</tr>
		<tr> <!-- 第二行(内容行) -->
			<td>第二行第一列</td>
			<td>第二行第二列</td>
			<td colspan="2"></td> <!-- 一个单元格占2列，可用于横向合并单元格 -->
			<td rowspan="2"></td> <!-- 一个单元格占2行，可用于纵向合并单元格 -->
		</tr>
		<tr> <!-- 第三行(内容行) -->
			<td>第三行第一列</td>
			<td>第三行第二列</td>
		</tr>
	</tbody>
</table>
<script type="text/javascript">
	var oTable = document.getElementById('mytable');
	oTable.rows  //获取所有tr，数组形式
	oTable.cells //取tr下的td，数组形式
	oTable.insertRow() //添加一行
	oTable.insertCell() //添加一列
	oTable.deleteRow() //删除一行
	oTable.deleteCell() //删除一列
</script>

17. a标签：

超链接标签<a href="超链接网址" title="鼠标滑过显示的文本" target="_blank" >超链接显示的文本</a>

默认a标签是在当前页打开，target属性为blank时在新窗口打开。

a标签伪类顺序：a:link > a:visited > a:hover > a:active

注：

a标签具有分析url的功能，类似window.location 有protocol，hostname，host，port，search，hash，href，pathname等属性

a标签也具有同样的属性，var a = document.getElementById('atest'); a.hostname; a.host; ....

18. img标签：

19. form标签：

<form>
	<label for="user">账号</label>  <!-- for加input的id值，可以将这个label和这个input关联起来，点击这个label标签，也能触发input获焦 -->
	<input type="text" placeholder="账号" name="username" id="user"/> <!-- name属性是用来让后台知道每个input的值是来自哪个input -->
	<label for="pw">密码</label> <!-- placeholder是在输入框没值时显示的内容，当输入内容时会消失。和value不一样，value就是实实在在的值 -->
	<input type="password" placeholder="密码" name="password" id="pw" /> 
</form>

20. input标签：

<input type="text/password/button/submit/reset/radio/checkbox" /> 按钮或输入框，有不同类型，分别对应文本/密码/按钮/提交按钮/单选/复选，H5新增了很多类型：number、date、tel、email、range、time等等

<form>
	<input type="radio" name="love" value="喜欢" checked="checked" />  <!-- checked属性是指这个选项默认被选中 -->
	<input type="radio" name="love" value="不喜欢" />  <!-- 单选框按钮的name值得一样 -->
</form>
<form>
	<input type="checkbox" name="love1" value="登山" checked="checked" />
	<input type="checkbox" name="love2" value="划船" />  <!-- 复选框的name值得不一样 -->
	<input type="checkbox" name="love2" value="骑车" />
</form>

21. textarea标签：

<textarea rows="行数" cols="列数">文本内容</textarea> 文本域标签，也可用样式控制大小。

22. select标签：

下拉选项框

<select multiple="multiple">  <!-- multiple属性可以使下拉列表多选，此时下拉列表样式是带滚动条的。进行多选时和相应系统多选文件时操作一样。 -->
	<option value="读书">读书</option>  <!-- value属性是向服务器提交的值 -->
	<option value="看报">看报</option>
	<option value="听歌" selected="selected">听歌</option>  <!-- selected属性是指这个选项默认被选中 -->
</select>

23. marquee 跑马灯(弹幕)：

<marquee loop="3">弹幕</marquee> 相关属性:loop循环次数，direction滚动放向(left,right)，behavior滚动方式(scroll,clide,alternate),width,height,bgcolor背景色，scrollamount滚动次数，scrolldelay延时

24. iframe和frame标签：

将别的网页整体引入自己的页面

<head>
	<frameset rows="15%,*">   <!-- 行高可为多个值，*代表该行占据剩余空间 -->
		<frame src="http://www.baidu.com" />
		<frameset cols="20%,*">
			<frame src="http://www.hao123.com" />
			<frame src="http://www.qq.com" />
		</frameset>
	</frameset>
</head>
<body>
	<iframe src="http://www.baidu.com"></iframe> 
</body>
<!-- 
	frame已经很少使用。
	iframe和frame区别：
		1.frame不能脱离frameset单独使用，iframe可以
		2.frame不能放body里，iframe必须放body里
		3.frame的高度能通过frameset控制，iframe可以自己控制
 -->