本文从最基本HTML5知识说起,让各位看官老爷能够从零开始学习!!!
不渴望能够一跃千里,只希望每天能够前进一步
基本知识
web前端三大技术: (1)html:结构
(2)css:样式
(3)JavaScript:行为
HTML:超文本标记语言
超文本=不局限于文本,可以是图片、视频等,即文本内容+非文本内容(视频+音频+图片等)
标记=标签:<单词>:(1)可分为单标签<header>和双标签<header></header>
(2)快捷键为:单词+tab
语言:编程语言
标签的属性:来修饰标签的,设置标签的一些功能
<标签 属性=“值” 属性2=“值2”...>
例如:<input type="text">
常见标签
详情可看:http://www.html5star.com/manual/html5label-meaning
hr标签在 HTML 页面中创建一条水平线
<sub>下标
<sub>上标
初始代码
初始代码快捷键=!+tab
<!DOCTYPE html>//文档声明,告诉浏览器这个一个html文件
<html lang="en">//html文件的最外层标签
//向搜索引擎表示该页面是html语言,并且语言为英文网站,其"lang"的意思就是“language”,语言的意思,而“en”即表示english,你的页面如果是中文页面,可将其改为<html lang="zh">
<head>//头部
<meta charset="UTF-8">//字符集为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>//主体
//写HTML的内容
</body>
</html>
头部:
主体:
注释
格式:<!--注释内容-->
快速注释和删除注释:(1)ctrl +/
(2)alt+shift+a
HTML语义化
(面试经常问)
根据网页中内容的结构,选择适合的HTML标签进行编写
好处如下:
- 在没有css,也能呈现很好的内容结构
- 有利于SEO,搜索引擎根据标签来确定上下文和各个关键字的权重
- 有利于开发和维护,代码更具可读性,代码更好维护
- 方便解析网页
- 便于团队开发和维护
意思是:标题就用标题标签<h1>,段落用<p>标签
注意:html文件只能出现一次h1标签
文本修饰标签
- <strong>:双标签,文本修饰符,字体加粗
<p>1111</p>
<p><strong>11111</strong></p>
- <em>:双,文本修饰符,字体斜体
<p><strong>11111</strong></p>
<p><em>11111</em></p>
- <sub>和<sup>:双,下标文本和上标文本
<p>a<sub>2</sub>+b<sup>1</sup>=ac<sub>2</sub></p>
- <del>和<ins>:双,删除文本和插入文本
<p>原价为<del>300</del>经优惠后价格为:<ins>100</ins></p>
图片
相对路径:(1). 在路径中表示当前路径
(2). .在路径中表示上一级路径
绝对路径: (1)C:\火萤视频视频\HYLiteResources\video
(2)https://tse1-mm.cn.bing.net/th/id/
图片标签:<img>
图片属性:src:引入图片的地址
alt:当图片出现故障,出现的文字
title:图片提示信息,鼠标点击图片之后出现的提示信息
注意:”./华硕官网/1.png“正斜线和反斜线的都可以,Windows都可以兼容
链接
<a>:双标签
链接属性:(1)herf属性:链接的地址
(2)target属性:可以改变链接打开的方式,默认情况下,在当前页面打开为:target=“_self”
打开新的页面为:target=“_blank”
注意:跳转的时候,鼠标形状是为手势的游标,而不是箭头的形状
跳转锚点
页面跳转,点击a标签,跳转到页面相应的位置,有两种方式:
-
<a href="#html">html</a>//href=“#+所需要跳转的标签id名称” <a href="#text">text</a> <a href="#java">java</a> <h1 id="html">html</h1>// <p>1111</p> <p>111</p> <p>111</p> <p>111</p> <h1 id="text">text</h1>// <p>111</p> <p>111</p> <p>111</p> <p>111</p> <h1 id="java">java</h1>//
-
<a href="#html">html</a>//在需要跳转的位置,添加<a name="html"></a>这一行代码 <a href="#text">text</a> <a href="#java">java</a> <a name="html"></a>//与上面不同的地方 <h1>html</h1> <p>1111</p> <p>111</p> <p>111</p> <p>111</p> <a name="text"></a>// <h1>text</h1> <p>111</p> <p>111</p> <p>111</p> <p>111</p> <a name="java"></a>// <h1>java</h1>
特殊符号
因为在html中编写某些字符不能被识别,比如多个空格,最后只能显示一个空格,故可以借用特殊符号的带代码来实现
列表
无序列表
<ul>、<li>:列表的最外层容器、列表项
注意:<ul>和<li>必须同时使用,而且中间不能存在其它标签
<ul>
<li type="circle">第一项</li>
<li>第二项</li>
</ul>
值 描述
disc 默认。实心圆。
circle 空心圆。
square 实心方块。
//并且这些类型可以通过css样式去更改
有序列表
<ol>、<li>:列表的最外层容器、列表项
注意:<ol>和<li>必须同时使用,而且中间不能存在其它标签,不过这有序列表不太经常使用
<ol type="1">
<li>第一项</li>
<li>第二项</li>
</ol>
有序列表(<ol>):
值 描述
1 默认。数字顺序的有序列表(1, 2, 3, 4)
a 字母顺序的有序列表,小写(a, b, c, d)
A 字母顺序的有序列表,大写(A, B, C, D)
i 罗马数字,小写(i, ii, iii, iv)
I 罗马数字,大写(I, II, III, IV)
//可以通过css去改变这种样式,使更好看一些
定义列表
<dl>:定义列表
<dt>:定义专业术语或名词
<dd>:对名词进行解释和描述
<dl>
<dt>HTML</dt>
<dd>超文本标记语言</dd>
<dt>css</dt>
<dd>样式表</dd>
</dl>
嵌套列表
列表之间可以互相嵌套,形成多层级的列表
<h1>美食</h1>
<ul>
<li>
<dl>
<dt>小吃类</dt>
<ul>
<li type="circle">
肠粉
</li>
</ul>
</dl>
</li>
</ul>
表格与表单
表格标签
<table>:表格的最外层容器
<tr>:定义表格行
<th>:定义表头
<td>:定义表格单元
<caption>:定义表格标题
语义化标签:<thead>、<tbody>、<tfood>,上面也解释了语义化,是为了更好的结构
注意:<tbody>可以出现多次,<tfood>和<thead>只能出现一次
<table>
<caption>天气预报</caption>
<thead>
<tr>
<th>天气</th>
<th>空气质量</th>
<th>雾霭情况</th>
</tr>
</thead>
<tbody>
<tr>
<td>晴天</td>
<td>良好</td>
<td>正常</td>
</tr>
<tr>
<td>下雨</td>
<td>优秀</td>
<td>无</td>
</tr>
</tbody>
<tfoot></tfoot>
</table
表格属性
border:表格边框
border-collapse 用于表格属性, 表示表格的两边框合并为一条,separate | collapse
取值:
separate : 默认值。边框独立(标准HTML)
collapse : 相邻边被合并
cellpadding:单元格内的空间
cellspacing:单元格之间的空间
rowspan:合并行
colspan:合并列
align:left、center、right左右对齐方式
valign:top、middle、bottom上下对齐方式
<table border="1">//以上面的代码为例,而进行的增加
<table border="1" cellpadding="10">
<table border="1" cellpadding="10" cellspacing="10">
表单标签
<form>标签是使用来创建供用户输入的html表单
<input>标签 定义通用的表单元素,有很多type属性:
type="text" 定义单行文本输入框
type="password" 定义密码输入框
type="radio" 定义单选框
type="checkbox" 定义复选框
type="file" 定义上传文件 form表单需要加上属性enctype="multipart/form-data"
type="submit" 定义提交按钮
type="reset" 定义重置按钮
type="button" 定义一个普通按钮
<form>
<h2>文本框</h2>
<input type="text" placeholder="请输入用户名">
<h2>密码框</h2>
<input type="password" placeholder="请输入密码">//placeholder代表没写内容时会出现的提示信息
<h2>上传文件</h2>
<input type="file">
<h2>复选框</h2>
<input type="checkbox" checked>苹果//checked代表一开始就会选上
<input type="checkbox" disabled>香蕉//disable代表不能选上的
<h2>单选框</h2>
<input type="radio" name="gen">男性//之所以需要定义name,是因为编译器这样子才能识别这两个input标签是一组,才能实现单选框的功能
<input type="radio" name="gen">女性
<h2>提交与重置</h2>
<input type="submit">
<input type="reset">
</form>
其它表单标签
<textarea>:多行文本框
<select>、<option>:下拉菜单
<label>:辅助表单
<form>
<h2>多行文本框</h2>
<textarea name="" id="" cols="30" rows="4"></textarea>
<h2>下拉菜单</h2>
<select size=“2”>//表示选择框展示两个选项,默认为1
<option selected disabled>请选择</option>//代表默认不能点击请选择
<option>北京</option>
<option>成都</option>
</select>
<select multiple>//多选,可用到多种不同表单中,比如上传文件
<option selected disabled>请选择</option>
<option>北京</option>
<option>成都</option>
</select>
<input type="radio" name="gen" id="man"><label for="man">男性</label>//label中的for是与input表单中的id所对应,代表点击字也可以选择到单选框
<input type="radio" name="gen" id="woman"><label for="woman">女性</label>
</form>
div与span标签
div全称为division,<div> 标签定义 HTML 文档中的一个分隔区块或者一个区域部分。可以容纳段落、标题、表格、图像等各种网页元素。即HTML大多数标签都可以嵌套在<div>标签中,<div>还可以嵌套多层<div>,用来将网页分隔开
<div> 是一个块级元素,也就是说,浏览器通常会在 div 元素前后放置一个换行符。
<span>(内联元素,不会换行) 标签被用来组合文档中的行内元素。用来修饰文字,div与span都是没有任何默认样式,需要css来编写的
简单的来说:div时用来划分区域的,span用来修饰文字的,都可以进行嵌套
课后练习
完成下文结构一样的布局
如需答案可以留言跟作者说一下