学习Spring Boot难免要接触thymeleaf,而使用thymeleaf的语法则一定要有html的知识,之前我半懂半不懂的使用thymeleaf,弄到对学习的前端程序代码不明不白,所以我们要对html基础知识有个大概了解。
我学习html+css是在慕课网上的,慕课有一个html+css基础入门课程十分适合新手,它是直接敲代码,所以对代码认识更为清晰,大家也可以进去学习。而这次我就在该慕课教程中总结一下html知识点,以便我们在学习thymeleaf时更加轻松。
(1)HTML,CSS,JavaScript
学习web前端开发基础技术需要掌握:HTML、CSS、JavaScript语言。下面我们就来了解下这三门技术都是用来实现什么的:
1. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字、图片、视频等。
2. CSS样式是表现。就像网页的外衣。比如,标题字体、颜色变化,或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
3. JavaScript是用来实现网页上的特效效果。如:鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻(新闻图片)的轮换。可以这么理解,有动画的,有交互的一般都是用JavaScript来实现的。
(2)html文件结构
html文件的结构:一个HTML文件是有自己固定的结构的。
1. <html></html>
称为根标签,所有的网页标签都在<html></html>中。
2. <head>
标签用于定义文档的头部,它是所有头部元素的容器。头部元素有<title>
、<script>
、 <style>
、<link>
、 <meta>
等标签,头部标签在下一小节中会有详细介绍。
3. 在<body>
和</body>
标签之间的内容是网页的主要内容,如<h1>
、<p>
、<a>
、<img>
等网页内容标签,在这里的标签中的内容会在浏览器中显示出来。
(3)head标签
<head>
<!--在<title>和</title>标签之间的文字内容是网页的标题信息,它会出现在浏览器的标题栏中-->
<title>...</title>
<!--描述html文档元数据,比如定义关键词用于搜索引擎搜索,定义web页面描述,定义页面作者,定义每30秒刷一次页面>
<meta>
<!--链接到外部样式文件(css,js等文件)-->
<link>
<!--定义 HTML 文档的样式信息。在 <style> 元素中,您可以规定在浏览器中如何呈现 HTML 文档-->
<style>...</style>
<!--用于定义客户端脚本,比如 JavaScript-->
<script>...</script>
</head>
(4)部分标签汇总(主要是body内的标签)
-
<body>内容</body>:body标签定义文档的主体,页面要显示中所有内容放在body标签内。
-
<p>段落文本</p>:定义段落的标签,<p>元素会自动在其前后创建一些空白。
-
<hx>标题文本</hx>(x可取1,2,3,4,5,6):使用
<hx>
标签来制作文章的标题。标题标签一共有6个,h1、h2、h3、h4、h5、h6。
-
<strong>需要强调的文本</strong>:加粗字体
-
<em>需要强调的文本</em>:使用斜体
-
<span>文本</span>:标签是没有语义的,它的作用就是为了设置单独的样式用的,即可使用css修改文本模样
-
<q>引用文本</q>:用于引用别人的话,实际上用于添加双引号
-
<blockquote>引用文本</blockquote>:用于引用长文本,实现效果为居中缩进
-
<br />或<br>:回车
-
:添加空格,记住不要遗漏“;”
-
<hr />或<hr>:添加横线,区分上下文
-
<address>联系地址信息</address>:添加地址信息,也可以定义一个电子邮件地址、签名或者文档的作者身份。实现效果为斜体
-
<code>代码语言</code>:添加一小段代码
-
<pre>语言代码段</pre>:添加一大段代码,但是回车需要输入
<br>
签,空格需要输入
(5)列表标签
-
语法:
<ul> <li>信息</li> <li>信息</li> ...... </ul>
举例:
<ul> <li>精彩少年</li> <li>美丽突然出现</li> <li>触动心灵的旋律</li> </ul>
ul-li在网页中显示的默认样式一般为:每项li前都自带一个圆点,如下图所示:
-
语法:
<ol> <li>信息</li> <li>信息</li> ...... </ol>
举例:
下面是一个热点课程下载排行榜:
<ol> <li>前端开发面试心法 </li> <li>零基础学习html</li> <li>JavaScript全攻略</li> </ol>
<ol>
在网页中显示的默认样式一般为:每项<li>
前都自带一个序号,序号默认从1
开始,如下图所示: -
<div>…</div>:确定逻辑部分。常用于定义 HTML 文档中的一个分隔区块或者一个区域部分(用于组合块级元素),以便通过 CSS 来对这些元素进行格式化(常与css一起使用)。
-
<div id="版块名称">…</div>:使用<div>划分出一个个独立的逻辑部分。为了使逻辑更加清晰,我们可以为这一个独立的逻辑部分设置一个名称
-
创建表格元素:table、tbody、tr、th、td
(1)<table>…</table>:整个表格以
<table>
标记开始、</table>
标记结束。(2)<tbody>…</tbody>:如果不加<thead><tbody><tfooter> , table表格加载完后才显示。加上这些表格结构, tbody包含行的内容下载完优先显示,不必等待表格结束后在显示,同时如果表格很长,用tbody分段,可以一部分一部分地显示。(通俗理解table 可以按结构一块块的显示,不在等整个表格加载完后显示。)
(3)<tr>…</tr>:表格的一行,所以有几对tr 表格就有几行。
(4)<td>…</td>:表格的一个单元格,一行中包含几对
<td>...</td>
,说明一行中就有几列。(5)<th>…</th>:表格的头部的一个单元格,表格表头。
(6)表格中列的个数,取决于一行中数据单元格的个数。
例子:
<table summary=""> <tr> <th>班级</th> <th>学生数</th> <th>平均成绩</th> </tr> <tr> <td>一班</td> <td>30</td> <td>89</td> </tr> <tr> <td>二班</td> <td>35</td> <td>85</td> </tr> <tr> <td>三班</td> <td>32</td> <td>80</td> </tr> </table>
结果图:
-
添加表格样式:
<style type="text/css"> table tr td,th{border:1px solid #000;} </style>
结果窗口显示出结果样式:
-
<!--添加摘要--> <table summary="表格简介文本"> <!--添加标题--> <caption>标题文本</caption> <tr> <td>…</td> <td>…</td> … </tr> </table>
(6)链接标签
-
<a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a>:定义超链接,用于从一个页面链接到另一个页面,其中href 属性指定链接的目标,title属性的作用,鼠标滑过链接文字时会显示这个属性的文本内容。
-
<a href="目标网址" target="_blank">链接显示的文本</a>:链接的网页默认是在当前浏览器窗口中打开,而如果需要在新的浏览器窗口中打开,则使用 target="_blank"
-
<a>标签还有一个作用是可以链接email地址,使用mailto能让访问者便捷向网站管理者发送电子邮件。我们还可以利用
mailto
做许多其它事情。下面一一进行讲解,请看详细图示:注意:如果mailto后面同时有多个参数的话,第一个参数必须以“
?
”开头,后面的参数每一个都以“&
”分隔。下面是一个完整的实例:
在浏览器中显示的链接:发送
点击“发送”链接会打开电子邮件应用,并自动填写收件人等设置好的信息,如下图:
-
<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">:插入图片
(1)src:标识图像的位置;
(2)alt:指定图像的描述性文本,当图像不可见时(下载不成功时),可看到该属性指定的文本;
(3)title:提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本);
(4)图像可以是GIF,PNG,JPEG格式的图像文件。
(7)表单标签
-
<form method="传送方式" action="服务器文件"> HTML 表单</form>:
(1)<form> :<form>标签是成对出现的,以<form>开始,以</form>结束。
(2)action :浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。
(3)method : 数据传送的方式(get/post)。
(4)所有表单控件(文本框、文本域、按钮、单选框、复选框等)都必须放在 <form></form> 标签之间(否则用户输入的信息可提交不到服务器上哦!)。
-
<form> <input type="text/password" name="名称" value="文本" /> </form>
(1)type:
当type="text"时,输入框为文本
输入框;
当type="password"时,
输入框为密码输入框。
(2)name:为文本框命名,以备后台程序ASP 、PHP使用。
(3)value:为文本输入框设置默认值。(一般起到提示作用)
举例
:<form> 姓名: <input type="text" name="myName"> <br/> 密码: <input type="password" name="pass"> </form>
在浏览器中显示的结果:
-
<textarea rows="行数" cols="列数">文本</textarea>:文本域
(1)<textarea>标签是成对出现的,以<textarea>开始,以</textarea>结束。
(2)cols :多行输入域的列数。
(3)rows :多行输入域的行数。
(4)在<textarea></textarea>标签之间可以输入默认值。
举例
:<form method="post" action="save.php"> <label>联系我们</label> <textarea cols="50" rows="10" >在这里输入内容...</textarea> </form>
在浏览器中显示结果:
-
<input type="radio/checkbox" value="值" name="名称" checked="checked"/>:单选框和复选框
(1)type:
当 type="radio" 时,控件为单选框
当 type="checkbox" 时,控件为复选框
(2)value:提交数据到服务器的值(后台程序PHP使用)
(3)name:为控件命名,以备后台程序 ASP、PHP 使用
(4)checked:当设置 checked="checked" 时,该选项被默认选中
如下面代码:
注意:代码中的<label>标签在本章 5-9 中有讲解。
在浏览器中显示的结果:
-
<option value ="提交值" selected="selected">:下拉列表框
如下代码:
在浏览器中显示的结果:
-
<select multiple="multiple">:复选框
如下代码:
在浏览器中显示的结果:
-
<input type="submit" value="提交">:提交按钮
举例
:在浏览器中显示的结果:
-
<input type="reset" value="重置">:重置按钮
举例
:在浏览器中显示的结果:
-
<label for="控件id名称">:
它为 input 元素定义标注。label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
(8)部分css知识
(1)id选择器和类(class)选择器的区别:
相同点:可以应用于任何元素
不同点:
1、ID选择器只能在文档中使用一次。与类选择器不同,在一个HTML文档中,ID选择器只能使用一次,而且仅一次。而类选择器可以使用多次。
下面代码是正确的:
<p>
三年级时,我还是一个<span class="stress">胆小如鼠</span>的小女孩,上课从来不敢回答老师提出的问
题,生怕回答错了老师会批评我。就一直没有这个<span class="stress">勇气</span>来回答老师提出的问
题。
</p>
而下面代码是错误的:
<p>
三年级时,我还是一个<span id="stress">胆小如鼠</span>的小女孩,上课从来不敢回答老师提出的问
题,生怕回答错了老师会批评我。就一直没有这个<span id="stress">勇气</span>来回答老师提出的问
题。
</p>
2、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式,但只可以用类选择器的方法实现,ID选择器是不可以的(不能使用 ID 词列表)。
下面的代码是正确的(完整代码见右侧代码编辑器)
.stress{
color:red;
}
.bigsize{
font-size:25px;
}
<p>
到了<span class="stress bigsize">三年级</span>下学期时,我们班上了一节公开课...
</p>
上面代码的作用是为“三年级”三个文字设置文本颜色为红色并且字号为25px。
下面的代码是不正确的(完整代码见右侧代码编辑器)
#stressid{
color:red;
}
#bigsizeid{
font-size:25px;
}
<p>
到了<span id="stressid bigsizeid">三年级</span>下学期时,我们班上了一节公开课...
</p>
上面代码不可以实现为“三年级”三个文字设置文本颜色为红色并且字号为25px的作用。
补充:
(1)value属性:
value 属性为 input 元素规定值。
对于不同类型的 input 元素,value 属性的用法也不同:
- 对于 "button", "reset", "submit" 类型 - 定义按钮上的文本
- 对于 "text", "password", "hidden" 类型 - 定义输入字段的初始(默认)值
- 对于 "checkbox", "radio", "image" 类型 - 定义与 input 元素相关的值。该值会发送到表单的 action URL。
注释:value 属性对于 <input type="checkbox"> 和 <input type="radio"> 是必需的。
注释:value 属性不适用于 <input type="file">。
(2)class属性:
class 属性定义了元素的类名。
class 属性通常用于指向样式表的类。但是,它也可以用于 JavaScript 中(通过 HTML DOM), 来修改 HTML 元素的类名。
其中:在 HTML 4.01 中, class 属性不能用于: <base>, <head>, <html>, <meta>, <param>, <script>, <style>, 和 <title>。
(3)href属性和src属性:
href属性是使用在<a>标签里面,用于指定超链接目标的 URL。
src属性是使用在<img>标签里面,它的值是图像文件的 URL,也就是引用该图像的文件的的绝对路径或相对路径。
(4)name属性:
name 属性规定 input 元素的名称。
name 属性用于对提交到服务器后的表单数据进行标识,或者在客户端通过 JavaScript 引用表单数据。
注释:只有设置了 name 属性的表单元素才能在提交表单时传递它们的值
(5)<form>标签内的action:
必需的 action 属性规定当提交表单时,向何处发送表单数据。
语法:<form action="value">
属性值:
值 | 描述 |
---|---|
URL | 向何处发送表单数据。 可能的值:
|
(6)button,input和a标签作为按钮时区别:
button
、input
、a
标签都可以加上一定的样式之后成为外观上没有太大差别的按钮,那么,这三个标签都适合在什么场景下作为按钮使用呢?
-
<button>提交</button>
:
通过onclick
绑定javascript
事件。 -
<input type="submit" value="提交" />
:
将表单内用户设置或选择的所有数据一并提交到后台。 -
<a class="btn" href="#">提交</a>
:
通过添加链接访问到页面中的某一个位置或另一个页面,不向后台提交数据。
(7)value和text的区别:
value 是标签的默认值 ,text是标签的属性类型 。text 是用于显示的,而 value 是传给后续表单处理的。text是指显示在控件上的值。value是指控件某项的值。比如:单选、复选框。
(8)<input>中的checked属性:
定义和用法:checked 属性设置或返回 checkbox 是否应被选中。
1.checked 属性规定在页面加载时应该被预先选定的 input 元素。
2.checked 属性 与 <input type="checkbox"> 或 <input type="radio"> 配合使用。
3.checked 属性也可以在页面加载后,通过 JavaScript 代码进行设置。
注:本文所有内容均来自慕课网中课程\前端开发\HTML/CSS\HTML+CSS课程。如需转载,请标明出处