- HTML基础
前端的基本构成(HTML+CSS+JS)
- HTML超文本标签语言,即是网页骨架的构建,包含了网页基本元素
- CSS 层叠样式表,负责规定html元素的样式,即负责网页元素的外观
- JavaScript,负责网页模型定义以及交互行为,即负责网页元素与用户的交互
- 1HTML基本结构
<!DOCTYPE html>
文档的声明,告知浏览器用什么文档类型来解析这个文档
<html lang="en">
DOM树的根元素
<head>
给浏览器搜索引擎看的
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
浏览器渲染给用户看的
</body>
</html>
- 2基本标签
- 单标签
<br/>换行,<hr/>水平线, <input>输入,<meta>辅助标签,<link>外部引用
- 双标签
<html>网页根元素、<head>头部元素、<title>网页标题、<body>网页主体
<table>表单元素、<tr>表单-行、<td>表单-行内格、<span>行内标签、<p>段落、<h1>~<h6>标题、<div>块标签、<a>超链接、<script>js脚本、<style>样式表
<b>/<strong>加粗 、<u>/<ins>下划线、<i>/<em>斜线、、<center>居中
- H5新增标签
结构标签:主要用来对页面结构进行划分,页面结构划分为顶部、导航、内容(页眉、区块)、页脚等。
header:一般网页头部信息/标题。
nav:导航条部分内容。
section:独立内容区块,一般内容区。
article:特殊独立区块,表示页眉中核心内容。
aside:标签内容之外,与标签内容相关的辅助信息。
figure:独立单元,如有图文混合模块。
hgroup:头部信息/标题相关信息。
footer:底部信息。
2.标签属性
<img src="" alt="" title="">
src:指定路径和文件名
alt:替换文本,即图片不能显示的替换的文字
title: 提示文本,鼠标悬浮时的提示信息
<a href="" target=""></a>
href:跳转目标位置
参数包括
外部链接: 如 "http://www.baidu.com"
内部链接: 如 "index.html"
空连接:如"#"
下载链接: 如 "压缩包文件名称"
锚点链接:如 "#No1",会跳转到id=No1的html元素
target:跳转方式
参数包括
_self,会在相同的框架或者窗口中打开链接
_blank,会在一个新的窗口中打开链接
_parent,会在父窗口或者包含来超链接引用的框架的框架集中打开链接。
_top,会清除所有被包含的框架,并打开链接
3.列表
3.1无序列表
<ul> <!-- ul中只能放li标签 -->
<li>1</li><!--li中可以放任意标签 -->
<li>2</li>
<li>3</li>
</ul>
3.2有序列表
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
3.3自定义列表
<dl>
<!-- 通常用于footer中模块的制作,dd标签是dt标签内容的解释说明或下级附属内容 -->
<dt>线下门店</dt>
<dd>小米之家</dd>
<dd>服务网点</dd>
<dd>零售网点</dd>
</dl>
4.表单标签
用于收集用户信息,主要包括表单域,表单控件,提示信息
- 表单域:用于划定表单区域,并设置提交相关参数
<form action="目标服务器程序地址" method="POST 或GET" name="表单名称">
表单内容
</form>
- 表单控件:即表单中的元素,如按钮,文本域等
<input type="类型" name="名称">
<b>type的属性值包括</b>
button 定义可点击的按钮(通常与 JavaScript 一起使用来启动脚本)。
checkbox 定义复选框
file 定义文件选择字段和 "浏览..." 按钮,供文件上传。
password 定义密码字段(字段中的字符会被遮蔽)
radio 定义单选按钮
reset 定义重置按钮(重置所有的表单值为默认值)
submit 定义提交按钮
text 默认。定义一个单行的文本字段(默认宽度为 20 个字符)
<b>H5新增属性</b>
date 定义 date 控件(包括年、月、日,不包括时间)。
email 定义用于 e-mail 地址的字段。
number 定义用于输入数字的字段。
search 定义用于输入搜索字符串的文本字段。
tel 定义用于输入电话号码的字段。
<select>
<!-- 多选栏 -->
<option value="北京"></option>
<option value="天津"></option>
</select>
<textarea cols="30" rows="10">
<!-- 文本域 -->
</textarea>