目录
概论
何为HTML,CSS?
HTML是超文本标记语言,而CSS为HTML提供了一种样式描述,二者都是做网站的编程语言,浏览器把代码解析后的样子就是网站。
注:一个网站由N个网页组成,每个网页都是一个.html文件。
本人基于vscode编辑器学习,前期以chrome浏览器(占据市场份额大,运用范围广)为基础针对学习。
如何理解HTML,CSS,JS三者的关系?
在我的理解中,html语言负责搭建结构,css负责对结构进行样式美化,js负责行为交互,这三者是前端开发的三大核心技术。
网站开发的分工
UI设计师:设计稿→代码的实现
web前端开发工程师(H5开发)
web后端开发工程师(数据库)
HTML入门
HTML的基础结构与属性
HTML: 超文本 、标记 、 语言 以下逐一解读:
超文本:文本内容+非文本内容(图片、视频、音频)
标记:也可以叫做标签,大体上可以分为单标签与双标签 特别注意:标签可以上下排列,也可以组合嵌套
一般形式:
< 单词 > <单词></单词>
标签属性:修饰标签的一些功能,其形式大致如下:
<标签 属性1 = "值1" 属性2 = "值2">
语言:编程语言
HTML初始代码
初始代码是每个.html文件都有的代码,目的是符合HTML的规范写法
可以使用:!+Tab快捷键创建初始代码,代码形式如下:
<!DOCTYPE html><!--文档声明//-->
<html lang="en"><!--html文件的最外层标签,包裹着所有html标签-->
<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>我是一个网页的标题</title><!--设置网页的标题-->
</head>
<body>
hello world<!-- 显示网页内容 -->
</body>
</html>
HTML注释
<!--内容-->
意义:1.把暂时不用的代码注释起来,方便日后使用
2.对开发人员进行提示
注释快捷键:1.ctrl+/ 整行注释 2.shift+alt+a 创建注释符
HTML语义化
根据网页中内容的结构,选择合适的HTML标签进行编写
好处:1.在没有CSS的情况下,页面也能呈现出很好的内容结构
2.有利于SEO,让搜索引擎爬虫更好地理解网页内容
3.方便其他设备解析(如:屏幕阅读器、盲人阅读器)
4.便于团队维护和开发
标题与段落
区别于title,标题在这里是一个双标签,形式如下:
<h1>大家好,我是小明</h1>
<h2>或许你会好奇我是谁,让我来告诉你吧</h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
<p>我叫李子明,我爱喝旺仔牛奶!</p>
h1是最重要的一个标题,并且一个.html文件中只能出现一个h1标签,但h2-h6可以重复出现多次。
注意:h5与h6标签在网页中不经常使用
P标签:段落标签,同样为双标签。
上述代码在网页中可以实现为:
文本修饰标签
<strong>表示强调,是一个双标签,可以达到字体加粗的效果
<em>也表示强调,但与<strong>相比稍弱,同样为一个双标签,可以达到斜体的效果
<sub>、<sup>下标文本、上标文本
<del>、<ins>删除文本、插入文本:一般情况下这二者是搭配使用的
以下是代码块与效果展示:
<p>
<strong>这句话需要强调</strong>
<em>这句话也需要强调,但强调性稍弱</em>
</p>
<p>
a <sup>2</sup>+b <sup>3</sup>=c<sup>4</sup>
H <sub>2</sub>O
</p>
<p>
促销:原价 <del>300</del>,现价 <ins>100</ins>
</p>
图片标签与图片属性
img:图片,是一个单标签
src:引入图片的地址
alt:当图片出现问题时,可以提示一段友好的文字
title:提示信息
width、height:控制图片的大小,单位是像素
<p>
<img src="这里填入图片的地址" alt="图片出现问题时显示的文字"title="提示信息"width="数值大小"height="数值大小">
</p>
引入文件的路径地址
相对路径:.在路径中表示当前路径 ..在路径中表示上一级路径
在使用相对路径时,一定要注意图片的存储地址!图片离.html文件越近,相对地址越简单
对于相对路径,可以观察文件的存储位置确定路径关系,文件路径既可以使用反斜线\,也可以使用斜线/,注意:网络地址只能写斜线/,所以我们尽量避免写反斜线\
绝对路径:无参照物,是绝对的路径地址
<body>
<!--<img src="./Untitled-1.html" alt="">-->
<!--<img src="../Untitled-1.html" alt="">-->
<img src="E:/img/liziming.jpg" alt="">
</body>
相关知识点代码示例如上
跳转链接
在这里我们引入两个重要标签,分别是<a>标签与<base>标签,知识点如下:
<a>标签是一个双标签,主要的作用是实现链接的功能
在<a>标签中有两个重要属性:href属性:链接的地址
target属性:可以改变链接打开的方式
练习代码如下:
<a href="http://www.baidu.com"target="_blank">访问百度</a>
<a href="点击图片后想要跳转的目标地址">
<img src="图片地址" alt="">
如上所示,我们可以知道,链接不仅可以针对字符,还可以针对图片。
注意:target属性一般默认为_self,意义是在当前页面打开,通过改变为_blank可以实现在新窗口打开
<base>标签是
一个单标签,可以改变<a>标签的默认行为,通常嵌套在<head>中,例子如下:
<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>-->
<base target="_blank">
</head>
合理使用<base>标签,可以大幅提高工作效率
跳转锚点
锚点的实现是基于<a>标签,所以<a>标签的使用一定要掌握好
通过使用锚点,可以实现页面内的快速跳转
实现方法一:#号 id属性 代码如下
<a href="#html">HTML</a>
<a href="#css">CSS</a>
<a href="#js">JavaScript</a>
<h2 id="html">HTML超文本标记语言</h2>
<p>这是一段文字,模拟段落</p>
<p>这是一段文字,模拟段落</p>
<p>这是一段文字,模拟段落</p>
<h2 id="css">CSS层叠样式表</h2>
<p>这是一段文字,模拟段落</p>
<p>这是一段文字,模拟段落</p>
<p>这是一段文字,模拟段落</p>
<h2 id="js">js脚本</h2>
<p>这是一段文字,模拟段落</p>
<p>这是一段文字,模拟段落</p>
<p>这是一段文字,模拟段落</p>
<p>这是一段文字,模拟段落</p>
实现方法二: #号 name属性 代码如下:
<a href="#html">HTML</a>
<a href="#css">CSS</a>
<a href="#js">JavaScript</a>
<a name="html"></a>
<h2>HTML超文本标记语言</h2>
<p>这是一段文字,模拟段落</p>
<p>这是一段文字,模拟段落</p>
<p>这是一段文字,模拟段落</p>
<a name="css"></a>
<h2>CSS层叠样式表</h2>
<p>这是一段文字,模拟段落</p>
<p>这是一段文字,模拟段落</p>
<p>这是一段文字,模拟段落</p>
<a name="js"></a>
<h2>js脚本</h2>
<p>这是一段文字,模拟段落</p>
<p>这是一段文字,模拟段落</p>
<p>这是一段文字,模拟段落</p>
<p>这是一段文字,模拟段落</p>
特殊符号
当我们尝试编写一些文本时,有时会出现一些输入法无法输入的字符,如注册商标号等;又或者是我们在一段文字中尝试加入多个空格时,页面并不会解析这些空格。这些字符都是特殊字符,在HTML中,为这些特殊字符准备了专门的代码:
现在我们做一点应用的实际例子:
<p>
<html>
</p>
<p>
hello world
</p>
在浏览器中会显示成这样:
<html>
hello world
HTML中的列表
无序列表
列表是一种常见的展示形式,在这里我们先来认识无序列表
无序列表涉及两个重要标签,分别是<ul>,<li>,分别指列表的最外层容器,列表项
二者必须组合出现!
通过type属性可以改变标签的样式(一般由css控制)
相关的样式设置可以参考HTML <ul> 标签的 type 属性
特别注意:两个标签中间不可以插入别的标签,但是<li>内部可以有其他标签
知识点代码如下:
<!--以下是正确的写法
<ul>
<li>第一项</li>
<li>第二项</li>
</ul>-->
<!--以下是错误的写法:
<ul>
<p>
<li></li>
</p>
</ul>-->
<ul type="circle">
<li><a href="#"><strong>大家好</strong></a></li>
<li><a href="#">我叫小明</a></li>
<li><a href="#">今年五岁半</a></li>
<li><a href="#">我来自中国</a></li>
<li><a href="#">很高兴认识你们</a></li>
</ul>
页面效果如下:
有序列表
在有序列表这里我们引入<ol>,<li>两个标签,代表的意义参考无序列表的<ul>,<li>,二者意义相同
相关规则参考无序列表,这里不过多赘述,直接上代码和实际效果
样式设置可以参考HTML <ol> 标签
注:有序列表用的较少,且无序列表可以代替有序列表,样式同样可以通过css控制
<ol>
<li><a href="#"><strong>大家好</strong></a></li>
<li><a href="#">我叫小明</a></li>
<li><a href="#">今年五岁半</a></li>
<li><a href="#">我来自中国</a></li>
<li><a href="#">很高兴认识你们</a></li>
</ol>
定义列表
当列表项需要添加标题以及对标题进行解释时引入
<dl>:定义列表,类似<ul><ol>
<dt>:定义专有名词或者术语
<dd>:对名词进行解释和描述
代码和效果如下:
<dl>
<dt>HTML</dt>
<dd>超文本标记语言</dd>
<dt>CSS</dt>
<dd>层叠样式表</dd>
<dt>js</dt>
<dd>网页脚本语言</dd>
</dl>
嵌套列表
列表之间可以互相嵌套形成多层级列表,下面引入相关操作代码:
<ul>
<li>
江苏省
<ul>
<li>南京市</li>
<li>扬州市</li>
<li>苏州市</li>
</ul>
</li>
<li>
山东省
<ul>
<li>烟台市</li>
<li>青岛市</li>
<li>烟台市</li>
</ul>
</li>
<dl>
<dt>中国</dt>
<dd>
<dl>
<dt>江苏省</dt>
<dd>南京市</dd>
<dd>扬州市</dd>
<dd>苏州市</dd>
</dl>
<dl>
<dt>山东省</dt>
<dd>烟台市</dd>
<dd>青岛市</dd>
<dd>烟台市</dd>
</dl>
</dd>
</dl>
</ul>
效果展示如下:
表格与表单
表格标签
在表格便签这里,我们引入以下几个标签:
<table>:最外层容器
<tr>:定义表格行
<th>:定义表头
<td>:定义表格单元
<caption>:定义表格标题
除此外还有三个语义化标签:
<tHead>,<tBody>,<tFoot>
注意:语义化标签只代表规范化,不具备效果!
下面我们来展示相关知识点代码以及效果图:
<table>
<caption>天气预报</caption>
<tHead>
<tr>
<th>日期</th>
<th>天气情况</th>
<th>出行情况</th>
</tr>
</tHead>
<tBody>
<tr>
<td>2022年6月21日</td>
<td>晴朗</td><!--可以通过img标签直接插入图片-->
<td>适合出行</td>
</tr>
<tr>
<td>2022年6月22日</td>
<td>小雨</td><!--可以通过img标签直接插入图片-->
<td>出门请带伞</td>
</tr>
</tBody>
<tFoot>
<!--也是tr,td的语句-->
</tFoot>
</table>
表格属性
表格属性通常有以下几种:
border:表格边框
<cellpedding>:单元格内的空间
<cellspacing>:单元格之间的空间
<rowspan>:合并行
<colspan>:合并列
<align>:左右对齐方式:left,right,center
<valign>:上下对齐方式:top,middle,bottom
表单标签
在表单标签这一块,我们先介绍两个比较重要的标签
<form>标签:表单最外层容器
<input>标签:标签用于搜集用户信息,根据不同的type属性值,展示不同的控件,比如输入框、密码框、复选框等
下面来介绍几个不同的type属性:
text:普通的文本输入框
password:密码输入框
checkbox:复选框
radio:单选框
file:上传文件
submit:提交按钮
reset:重置按钮
下面直接上代码和效果展示:
<form action="提交的地址">
<h2>输入框:</h2>
<input type="text">
<h2>密码框</h2>
<input type="password">
<h2>复选框</h2>
<input type="checkbox">苹果
<input type="checkbox">香蕉
<input type="checkbox">葡萄
<h2>单选框</h2>
<input type="radio" name="gender">男
<input type="radio" name="gender">女
<h2>上传文件</h2>
<input type="file">
<h2>提交按钮和重置按钮</h2>
<input type="submit">
<input type="reset">
</form>
了解完上述两个重要标签后,我们来了解下面三个标签
<textarea>:多行文本框
<select>,<option>:这是一对组合标签,起到下拉菜单的作用
<label>:辅助表单
话不多说,直接上代码和效果图:
<h2>多行文本框</h2>
<textarea name="" id="" cols="30" rows="10"></textarea>
<h2>下拉菜单</h2>
<select name="" id="">
<option selected disabled>请选择</option>
<option value="">北京</option>
<option value="">上海</option>
<option value="">苏州</option>
<option value="">南京</option>
</select>
这里有几个属性可以让我们的代码更加精细:
checked:选定
selected:设置默认选项
disabled:锁定,使选项不能选择
size:可以设置显示项数,默认值为1
multiple:设置多选
当然,还有更多的属性,这里不一一例举。
表格表单组合使用
表格表单互相组合形成数据展示效果,在写的时候我们注意,表格有嵌套规范,表单没有,所以再正常情况下我们优先写表单,实战如下:
<form action="">
<table border="1" cellpadding="30">
<tBody>
<tr>
<td rowspan="4">总体信息</td>>
<td colspan="2">用户注册</td>
</tr>
<tr>
<td>用户名</td>
<td><input type="text" placeholder="请输入用户名"></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" placeholder="请输入密码"></td>
</tr>
<tr>
<td colspan="4">
<input type="submit">
<input type="reset">
</td>
</tr>
</tBody>
</table>
</form>
效果如下:
在我学习的过程中,我在这部分遇到了一点问题,如果我把代码中的一部分改为
<tr>
<td rowspan="4">总体信息</td>>
</tr>
<tr>
<td colspan="2">用户注册</td>
</tr>
显示效果就会变为:
这是由于另起的tr会另外计算一行,所以实际上这里有五行,“总体信息”只能占四行
div标签与span标签
<div>表示一个“块”,有划分区域的作用,相当于一块区域容器,可以容纳各类网页元素,即HTML中大多数标签都可以嵌套在<div>标签中,<div>中还可以嵌套多层<div>,用来将网页分割为独立的部分,以此实现网页的规划与布局。
<span>是一个“内联”,用于修饰文字。
注意:<div>,<span>没有任何默认样式,需配合CSS使用
<body>
<div>这是一个块</div>
<span>这是一个内联</span>
</body>
截至到这里,HTML的基础部分到此结束,CSS部分由于篇幅关系会开一篇新的日志记录!