HTML学习总结

最新推荐文章于 2024-03-13 15:03:28 发布

Joker_gezi

最新推荐文章于 2024-03-13 15:03:28 发布

阅读量367

点赞数 1

文章标签： html 学习总结基础笔记

本文链接：https://blog.csdn.net/Joker_gezi/article/details/101634966

版权

HTML初步

什么是HTML？
HTML就是超文本标记语言，制作网页的标准语言，html文件简单而言可以使用记事本来进行编程，只需将其重命为后缀为.htm或者.html即可直接打开成网页页面。
但还有很多功能更强的编辑环境可以使用，比如sublime text。
HTML语言编写的基本结构
首先要对文章进行声明。<!DOCTYPE html>
接着就是每一个HTML文件的基本结构

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>

</body>
</html>

上述标签就是一个html文件的所有标签，< html>标签是文档的根元素，< head>标签包含了文档的元数据。title 标签元素描述了文档的标题，< body>标签包含了所有可见的页面内容。
3. HTML之所以被称为标记语言，就是因为其使用标签来描述网页，HTML标签通常有以下几个特点：
以英文状态下的一对尖括号包围关键词比如< html>
通常成对出现 < html>h和< /html>
一个标签对的第二个标签是结束标签，关键词前要加/

HTML语法

那么，下面就介绍一下HTML文件的常用标签
在开始之前说明几个事项，在HTML文件中常说的元素其实也就是一对标签以及标签队之间的内容，所以说，HTML文件就是由HTML元素构成的，而且元素之间是可以相互嵌套的。属性，就定义为对元素的附加描述，一般将其写在开始标签里属性值一般用一对" "包围，属性与属性值之间用=连接。再有就是，HTML文件对于大小写并不敏感，但是我们在书写时一般采用小写。下面就是常用标签对的总结：
1.标题
标题是由< h1>h和< /h6>标签对来定义的，随着标签对数字的增大，标题内容字号越小。
2.段落
段落是由< p>标签对来定义的，浏览器会自动的在段落前后进行自动换行，但是在段落标签内容中，所有的空格和空行都会识别成一个空格，所以要实现段内换行就要使用< br>，空格字符&nbsp。
3.文本的格式化标签
上文我们说到了，HTML各元素之间可以嵌套，因此，可以再标签内部对文本内容进行格式化设置。
文本的常用格式化标签如下：
< b> 定义粗体文本
<em> 定义着重文字
< i> 定义斜体字
< small> 定义小号字
< strong> 定义加重语气
< sub> 定义下标字
< sup> 定义上标字

4.链接
在HTML中可以使用超链接来使其进行网页跳转，链接可以使用< a>标签来定义，标签的href属性用来描述链接地址比如：

<a href="http://www.xiachufang.com/category/1136/" >鸡肉做法大全</a>

在这里插入图片描述

但是这样添加的链接在点击时新页面会覆盖原页面，所以我们可以将标签的target属性设置为"_blank"，这样会在新的窗口打开页面。
5.图像
图像是由< img>标签对实现的，其基本语法如下
src属性是图片的源地址，一般使用相对路径进行描述，alt属性是图片在无法正常显示时的一些替换性文本。同时图片的高度和宽度可以用width和height属性来设置。像这种不是成对出现的标签，在标签内部最好以/结束。

<img src="images/小鸡.jpg" alt="小鸡小鸡" width="200" height="210" />

图片在网页中显示如下：
在这里插入图片描述
当图片无法正常显示时，就会显示其alt属性的值。

6.表格

 <table >
	    <caption>标题</caption>
		<tr>
			<th>R1,C1</th>
			<th>R1,C2</th>
		</tr>
		<tr>
			<td>R2,C1</td>
			<td>R2,C2</td>
		</tr>
 </table >

表格显示如下：
在这里插入图片描述
HTML中表格由一对< table>标签定义，里边嵌套了< caption>标签定义标题，<tr>标签定义行，标签内部再定义<th>标签定义表头，一般浏览器都会将表头加粗显示，同时<td>标签定义列。生活中，一般所有表格都是有边框的，所以我们可以使< table>标签的border属性值为1来为表格添加边框。
7.列表
在HTML中，列表分为有序列表和无序列表，无序列表使用<ul>标签来实现，内部嵌套<li> 标签定义项目内容，举例如下：

<ul>
<li>apple</li>
<li>orange</li>
</ul>

运行显示结果如下：
在这里插入图片描述
有序列表则使用<ol>标签来实现，同样内部嵌套<li> 标签定义项目内容。

<ol>
<li>apple</li>
<li>orange</li>
</ol>

运行显示结果如下：
在这里插入图片描述
8.区块
在网页的编写时，往往会希望一部分元素，统一使用统一个格式，或者希望元素的部分内容使用不同格式，这就需要对元素进行区块的划分。具体标签为<div>和<span>
<div>相当于一个盛有很多元素的容器，但是他本身也不会有特殊的含义，在网页中只会在其前后产生空行，不会显示其他别的内容。
<span>也没有特殊含义，他是在一个元素内容内部将部分内容进行联合。因此可以利用标签属性对部分内容进行格式化。
举个例子:

<div>
 <ol>
  <li>apple</li>
  <li>orange</li>
 </ol>
</div>

<h1 >这是一个< <span style="color:yellow">简单</span> 的例子</h1>

9.表单
在网页中通常不仅只向用户显示的东西，也需要从用户端接收输入内容，表单就是用来收集用户输入的。
表单是由<form>标签实现的，标签内容嵌套使用<input>标签的type属性来确定用户是通过文本域、单选框还是复选框来输入的。
文本域：type=“text”；或者type=“password” 显然后者用户输入不会使用明文显示。
单选按钮：type=“radio”
复选框：type=“checkbox”
举个例子：

<form>
	请输入名字：<input type="text"><br>
	请输入密码：<input type="password"><br>
	<input type="radio" >真心话<br>
	<input type="radio" >大冒险<br>
	
	<input type="checkbox">真心话<br>
	<input type="checkbox">大冒险<br>
	</form>

在这里插入图片描述
同时，还有一种用户输入是通过下来列表实现的，具体代码如下

<form action="">
	<select name="cars">
	<option value="volvo">Volvo</option>
	<option value="saab">Saab</option>
	<option value="fiat">Fiat</option>
	<option value="audi">Audi</option>
	</select>
	</form>

结果显示如下：
在这里插入图片描述
10. 框架
通常我们在浏览页面时希望在一个窗口可以看到多个页面，这就可以使用<iframe>来实现：

<iframe src="https://www.baidu.com/" width="800" height="500"></iframe>

src属性值可以设为网页链接，也可以是网页所对应html文件的相对位置。同时网页的高度和宽度可以用width和height属性来设置。

后记

到此，基本将HTML的常用语法及内容顺了一遍，但是仅使用以上内容设计出来的网页是不美观的，所以接下来我们要对网页进行渲染就必须进一步学习CSS，使网页变得美观。
新手小白，多多关照！

Joker_gezi

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
HTML学习总结

1.什么是HTML？HTML就是超文本标记语言，制作网页的标准语言，html文件简单而言可以使用记事本来进行编程，只需将其重命为后缀为.htm或者.html即可。但还有很多功能更强的编辑环境可以使用，比如sublime text。使用sublime text时要安装emmet包，安装完毕以后即可进行代码扩展十分方便。安装使用链接如下：https://blog.csdn.net/Floren...
复制链接

扫一扫