您现在的位置是：首页 > 技术学习 > HTML 网站首页 技术学习 HTML
前端HTML学习
- 技术学习
- 2019-02-27
- 173已阅读
- 3
简介
HTML(网页内容载体 Hypertext Markup Language)，网页的结构层(骨架)。是一种用于创建网页的标准标记语言。运行在浏览器上，由浏览器来解析。
web前端包括:
- HTML(网页内容载体 Hypertext Markup Language)，网页的结构层(骨架)。
- CSS(网页外衣 Cascading styles sheets)，网页表现层(样子)。
- 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>
- DOCTYPE是document type(文档类型)的简写，在web设计中用来说明你用的XHTML或者HTML是什么版本，
<!DOCTYPE html>是最简洁写法。 -
<html lang="en">...</html>html标签，标签里面包含body、head等标签。lang=“en“用来告诉浏览器这是一个英文页面，也可以为lang="zh"或lang="zh-CN"表示中文网页。 -
<head>...</head>head标签，里面常放meta、title、link、style、script等标签。一般用来放标题、关键字、css、js等内容。 -
<meta charaset="UTF-8">,声明你的编码语言格式，utf-8支持中文。 -
<title>...</title>title标签。网页的标题。即平常打开的网页窗口的名字。 -
<body>...</body>body标签，网页主要显示区域。里面用来放要在网页上显示的内容。
1-2.认识html里面的标签
1-2-1 标签书写分类：
- 成对出现的标签：
<html></html>、<head></head>、<body></body>、<p></p>….等等这些标签是以</标签名>为闭合标签，标签中间写相应内容。 - 单标签：
<meta />、<br/>、<link />、<input />…等，这些标签是单标签，使用时为了规范尽量要加 / 。单标签一般通过标签属性来添加相应功能。
1-2-2 代码注释
- html代码注释：
<!--注释内容--> - css代码注释：
/*注释内容*/ - js代码注释：
单行代码注释：//注释内容；
多行代码注释：/*多行代码*/。
1-2-3 标签介绍
- body标签：
<body>...</body>
放网页要展示的内容。 - p标签：
<p>...</p>
段落标签，添加段落，有默认样式。 <h1></h1> →<h6></h6>标题标签，
从h1到h6越来越小，有默认样式。- strong、em 强调标签：
<strong></strong>
加粗；
<em></em>
斜体。 - span标签：
<span>...</span>
默认没任何样式，单可以用css控制里面内容的样式。 - q标签：
<q>...</q>
短文本引用。显示会给标签内容加双引号。 - blockquto标签：
<block>...</block>
长文本引用标签。有默认样式，段落前后缩进。 - br标签：
<br/>
换行标签。 标签：
空格符每写一个只代表一个空格，- hr标签：
<hr/>
添加水平横线有默认样式。 - adress标签：
<adress></adress>
一般写地址，邮件，签名，身份等(语义化)，默认斜体。 - code、pre标签：
<code >...</code >引入一行代码。
<pre></pre>引入多行代码。 - 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>
- dl、dt、dd 标签：
定义列表
<dl>
<dt>列表标题</dt>
<dd>列表项1</dd>
<dd>列表项2</dd>
</dl>
- div 标签：
<div></div>
最常用的标签，常用于布局排版。 - 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>
- 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; - img标签：
<img src=“图片地址” alt="图片下载失败时可看到指定的文本" tltle="鼠标滑过图片时显示的文本" /> - form标签：
<form method="传送方式(GET/POST)"action="服务器接受数据的地址"></form>
<form>
<label for="user">账号</label>
<!-- for加input的id值，可以将这个label和这个input关联起来，点击这个label标签，也能触发input获焦 -->
<input type="text" placeholder="账号" name="username" id="user"/>
<!-- name属性是用来让后台知道每个input的值是来自哪个input -->
<!-- placeholder是在输入框没值时显示的内容，当输入内容时会消失。和value不一样，value就是实实在在的值 -->
<label for="pw">密码</label>
<input type="password" placeholder="密码" name="password" id="pw" />
</form>
- 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>
- textarea标签：
<textarea rows="行数" cols="列数">文本内容</textarea>
文本域标签，也可用样式控制大小。 - select标签：
下拉选项框
<select multiple="multiple">
<!-- multiple属性可以使下拉列表多选，此时下拉列表样式是带滚动条的。进行多选时和相应系统多选文件时操作一样。 -->
<option value="读书">读书</option>
<!-- value属性是向服务器提交的值 -->
<option value="看报">看报</option>
<option value="听歌" selected="selected">听歌</option>
<!-- selected属性是指这个选项默认被选中 -->
</select>
- marquee 跑马灯(弹幕)：
<marquee loop="3">弹幕</marquee>
相关属性:
loop循环次数，
direction滚动放向(left,right)，
behavior滚动方式(scroll,clide,alternate),
width宽,
height高,
bgcolor背景色，
scrollamount滚动次数，
scrolldelay延时 - 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可以自己控制
-->
下一篇：前端CSS学习 - 1
点击排行
-
2019-06-30
-
JS事件绑定、冒泡/捕获、常见的兼容处理、委托、阻止默认行为和冒泡
2019-05-16 -
通过file按钮上传的图片如何在当前页面显示出来 FileReader
2019-06-04 -
2019-02-21