前端学习--HTML

HTML：
HTML(Hyper Text Markup Language)超文本标记语言
HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页

关于web需了解：

标准的web有：结构（html）+表现（css）+行为（javascript）三种元素组成。

所以要学好网站开发必需学好html、css、javascrip

html代码的基本框架:
<! doctype html>

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

代码讲解：

（1） <html></html>称为根标签，所有的网页标签都在<html></html>中。（2） <head> 标签用于定义文档的头部，它是所有头部元素的容器。头部元素有<title>、<script>、 <style>、<link>、 <meta>等标签，头部标签在下一小节中会有详细介绍。下面这些标签可用在 head 部分：<span style="color:#14191e"><head><title>...</title><meta><link><style>...</style><script>...</script>
</head></span>

< title > 标签：在< title >和< /title >标签之间的文字内容是网页的标题信息，它会出现在浏览器的标题栏中。网页的title标签用于告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出网页的主题。每个网页的内容都是不同的，每个网页都应该有一个独一无二的title

例如：

<span style="color:#14191e"><head><title>hello world</title>
</head></span>

（3）在< body>和< /body>标签之间的内容是网页的主要内容，如< h1>、< p>、< a>、< img>等网页内容标签，在这里的标签中的内容会在浏览器中显示出来。

2.< !–注释文字–>，可用ctrl+/调出。

3.< p>标签，添加段落。

  语法：<p>段落文本</p>

4.< hx>标签，为网页添加标题。标题标签一共有6个，h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。< h1>是最高的等级，且字号也是最大的。

语法：< hx>标题文本</ hx> (x为1-6)

5.加入强调语气，使用< strong>和< em>标签。但两者在强调的语气上有区别:< em> 表示强调，< strong> 表示更强烈的强调。并且在浏览器中< em> 默认用斜体表示，< strong> 用粗体表示。两个标签相比，目前国内前端程序员更喜欢使用< strong>表示强调，。

  语法：<em>需要强调的文本</em>  <strong>需要强调的文本</strong>

6.使用< span>标签为文字设置单独样式

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>了不起的盖茨比</title>
<style>
span{color:blue;  //为美国梦三个字设置颜色
}
</style>
</head>
<body><p>1922年的春天，一个想要成名名叫<em>尼克•卡拉威</em>（托比•马奎尔Tobey Maguire 饰）的作家，离开了美国中西部，来到了纽约。那是一个道德感渐失，爵士乐流行，走私为王，股票飞涨的时代。为了追寻他的<span>美国梦</span>，他搬入纽约附近一海湾居住。</p><p>菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"<strong>爵士乐时代</strong>"吟唱华丽挽歌，其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p>
</body>
</html>

7.< q>标签，短文本引用

语法：

<q>引用文本</q>

8.< blockquote>标签，长文本引用

语法:

< blockquote>引用文本</ blockquote>

9.使用< br/>标签分行显示文本，在需要加回车换行的地方加入< br />，< br />标签作用相当于word文档中的回车。

 - 锄禾日当午 <br/ >            - 汗滴禾下土<br/ >             - 谁知盘中餐<br/ >             - 粒粒皆辛苦<br/ >

10.“ ”为网页中添加一些空格。

11.< hr/>标签，添加水平横线.

12.< address>标签，为网页加入地址信息

语法：

<address>联系地址信息</address>例如：：< address>北京市西城区德外大街10号< /address>

13.使用< code>标签加入一行代码。

语法：

< code>代码语言< /code>例如：< code>var i=i+300;< /code>

14.使用< pre>标签为网页加入大段代码。

语法：

<pre>语言代码段</pre>

例如：

<pre>var message="欢迎";for(var i=1;i<=10;i++){alert(message);}
</pre>

15.使用ul，添加新闻信息列表，ul-li在网页中显示的默认样式一般为：每项li前都自带一个圆点。

语法：

< ul>
< li>信息< /li>
< li>信息< /li>
…
< /ul>
举例：

<ul><li>精彩少年</li><li>美丽突然出现</li><li>触动心灵的旋律</li>
</ul>

16.使用ol，添加图书销售排行榜，< ol>在网页中显示的默认样式一般为：每项< li>前都自带一个序号，序号默认从1开始。

语法：

< ol>
< li>信息< /li>
< li>信息< /li>
…
< /ol>
举例：

下面是一个热点课程下载排行榜：

<ol><li>前端开发面试心法 </li><li>零基础学习html</li><li>JavaScript全攻略</li>
</ol>

17.认识div在排版中的作用，在网页制作过程过中，可以把一些独立的逻辑部分划分出来，放在一个< div>标签中，这个< div>标签的作用就相当于一个容器。什么是逻辑部分？它是页面上相互关联的一组元素。如网页中的独立的栏目版块，就是一个典型的逻辑部分。

语法：

<div>…</div>

18.给div命名，使逻辑更加清晰，用id属性来为< div>提供唯一的名称，这个就像我们每个人都有一个身份证号，这个身份证号是唯一标识我们的身份的，也是必须唯一的。

语法：

<div  id="版块名称">…</div>

19.table标签，认识网页上的表格。

创建表格的四个元素：

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）表格中列的个数，取决于一行中数据单元格的个数。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>认识table表标签</title>
</head>
<body>
<table><tbody><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></tbody>
</table>
</body>
</html>

20.用css样式，为表格加入边框

如下代码：

< style type="text/css">
table tr td,th{border:1px solid #000;}

< /style>
21.< table summary=“表格简介文本”> 为表格添加摘要
22.为表格添加标题：

 - <table><caption>标题文本</caption><tr><td>…</td><td>…</td>…</tr>…</table>

23.使用< a>标签，链接到另一个页面。使用< a>标签可实现超链接，它在网页制作中可以说是无处不在，只要有链接的地方，就会有这个标签。

语法：

<a  href="目标网址"  title="鼠标滑过显示的文本">链接显示的文本</a>

title属性的作用，鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发中作用很大，主要方便搜索引擎了解链接地址的内容（语义化更友好）

例如：

<a  href="http://www.baidu.com"  title="点击进入百度">click here!</a>
<a>标签在默认情况下，链接的网页是在当前浏览器窗口中打开，有时我们需要在新的浏览器窗口打开。

如下代码：

<a href="目标网址" target="_blank">click here!</a>

注：页面只显示之间的内容。

24.使用mailto在网页中链接Email地址

25.认识标签，为网页插入图片

语法：

<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">

举例：

<img src = "myimage.gif" alt = "My Image" title = "My Image" />

讲解：

（1）src：标识图像的位置；

（2）alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；

（3）title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；

（4）图像可以是GIF，PNG，JPEG格式的图像文件。（JPEG图片支持的颜色比较多，图片可以压缩，但是不支持透明，一般用JPEG来保存照片等颜色丰富的图片。PNG支持的颜色多，并且支持复杂的透明。）

26.使用表单标签，与用户交互

网站怎样与用户进行交互？答案是使用HTML表单(form)。表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。

语法：

<form   method="传送方式"   action="服务器文件">

讲解：

1.< form> ：< form>标签是成对出现的，以< form>开始，以< /form>结束。

2.action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。

3.method ：数据传送的方式（get/post）。

<form    method="post"   action="save.php"><label for="username">用户名:</label><input type="text" name="username" /><label for="pass">密码:</label><input type="password" name="pass" />
</form>

代码如下：

<!DOCTYPE HTML><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>表单标签</title>
</head>
<body>
<form method="post" action="save.php"><label for="username">用户名:</label><input type="text"  name="username" id="username" value="" /><label for="pass">密码:</label><input type="password"  name="pass" id="pass" value="" />    <input type="submit" value="确定"  name="submit" /><input type="reset" value="重置" name="reset" />
</form>
</body>
</html>

注意:

（1）所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在 < form>< /form> 标签之间（否则用户输入的信息可提交不到服务器上哦！）。

（2）method : post/get 的区别这一部分内容属于后端程序员考虑的问题。感兴趣的小伙伴可以查看本小节的 wiki，里面有详细介绍。

28.文本域，支持多行文本输入

当用户需要在表单中输入大段文字时，需要用到文本输入域。

语法：

<textarea  rows="行数"  cols=“列数”>文本</textarea>

1、< textarea>标签是成对出现的，以< textarea>开始，以< /textarea>结束。

2、cols ：多行输入域的列数。

3、rows ：多行输入域的行数。

例如：

<form  method="post" action="save.php"><label>联系我们</label><textarea cols="50" rows="10" >在这里输入内容...</textarea></form>

29.使用单选框、复选框，让用户选择

在使用表单设计调查表时，为了减少用户的操作，使用选择框是一个好主意，html中有两种选择框，即单选框和复选框，两者的区别是单选框中的选项用户只能选择一项，而复选框中用户可以任意选择多项，甚至全选。请看下面的例子:

语法：

<input   type="radio/checkbox"   value="值"    name="名称"   checked="checked"/>

（1）type:

当 type=“radio” 时，控件为单选框

当 type=“checkbox” 时，控件为复选框

（2）value：提交数据到服务器的值（后台程序PHP使用）

（3）name：为控件命名，以备后台程序 ASP、PHP 使用.同一组的单选按钮，name 取值一定要一致，这样同一组的单选按钮才可以起到单选的作用。

代码如下：

<!DOCTYPE HTML><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>单选框、复选框</title>
</head>
<body>
<form action="save.php" method="post" ><label>性别:</label><label>男</label><input type="radio" value="1"  name="gender" /><label>女</label><input type="radio" value="2"  name="gender" />
</form>
</body>
</html>

（4）checked：当设置 checked=“checked” 时，该选项被默认选中

30.使用下拉列表框，节省空间

下拉列表在网页中也常会用到，它可以有效的节省网页空间。既可以单选、又可以多选。如下代码：

2、selected=“selected”：

设置selected="selected"属性，则该选项就被默认选中。

<!DOCTYPE HTML><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>下拉列表框</title>
</head>
<body>
<form action="save.php" method="post" ><label>爱好:</label><select><option value="看书">看书</option><option value="旅游" selected="selected">旅游</option><option value="运动">运动</option><option value="购物">购物</option></select>
</form>
</body>
</html>

31.使用下拉列表框进行多选

下拉列表也可以进行多选操作，在标签中设置multiple="multiple"属性，就可以实现多选功能，在 windows 操作系统下，进行多选时按下Ctrl键同时进行单击（在 Mac下使用 Command +单击），可以选择多个选项。如下代码：

代码：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>使用下拉列表框进行多选</title>
</head>
<body>
<form action="save.php" method="post" ><label>爱好:</label><select multiple="multiple"><option value="看书">看书</option><option value="旅游">旅游</option><option value="运动">运动</option><option value="购物">购物</option><option value="购物">购物</option></select>
</form>
</body>
</html>

](https://img-blog.csdnimg.cn/20190113024034140.png)

32.使用提交按钮，提交数据

在表单中有两种按钮可以使用，分别为：提交按钮、重置。这一小节讲解提交按钮：当用户需要提交表单信息到服务器时，需要用到提交按钮。

语法：

<input   type="submit"   value="提交">

type：只有当type值设置为submit时，按钮才有提交作用

value：按钮上显示的文字

33.使用重置按钮，重置表单信息

当用户需要重置表单信息到初始时的状态时，比如用户输入“用户名”后，发现书写有误，可以使用重置按钮使输入框恢复到初始状态。只需要把type设置为"reset"就可以。

语法：

type：只有当type值设置为reset时，按钮才有重置作用

value：按钮上显示的文字

举例：

代码：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>重置按钮</title>
</head>
<body>
<form action="save.php" method="post" ><label>爱好:</label><select><option value="看书">看书</option><option value="旅游" selected="selected">旅游</option><option value="运动">运动</option><option value="购物">购物</option></select><input type="submit" value="确定"  /><input type="reset" value="重置"  />
</form>
</body>
</html>

34.form表单中的label标签

label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）。

语法：

<label for="控件id名称">

注意：标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。

例子：

<!DOCTYPE HTML><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>form中的lable标签</title>
</head><body>
<form><label for="male">男</label><input type="radio" name="gender" id="male" /><br /><label for="female">女</label><input type="radio" name="gender" id="female" /><br /><label for="email">输入你的邮箱地址</label><input type="email" id="email" placeholder="Enter email"></form></body>
</html>

前端学习--HTML相关推荐

【FE前端学习】第二阶段任务-基础
技能学习部分: 1.需要熟练掌握HTML标签以及CSS各个常用属性. 2.掌握CSS3 常用属性 3.掌握jquery的基本用法,对于JS基本逻辑语句需要熟练掌握上文 [FE前端学习]第二阶段任务- ...
Web前端学习有哪些技巧?
想要学好web前端技术,在学习过程中找到合适的方法和技巧,那么在实际学习过程中会更加的容易和快速掌握知识重点,尤其是对于初学者尤为关键,下面小编就为大家详细的介绍一下Web前端学习有哪些技巧?希望能够 ...
“计算机之子”winter：我的前端学习路线与方法
你好,我是winter.今天我们一起来聊聊前端的学习路线与方法. 到现在为止,前端工程师已经成为研发体系中的重要岗位之一.可是,与此相对的是,我发现极少或者几乎没有大学的计算机专业愿意开设前端课程,更 ...
python比前端好学吗_前端学习到底难不难？
难易程度是相对的,不是绝对的. 前端学习相对于java,python等肯定是更为简单的.精通会有难度,而且更新速度很快,需要不断的充实自己,提升自己,这也是一个难点. 前端学习初期,不知道该怎么学,学 ...
hbuilder前端需要的插件_最新web前端学习路线
随着互联网的深入发展,前端开发工程师已成为市场上极具竞争力的人才.许多学生,包括以前的UI,java,或完全零基础,想学习的前端.下面的思维导图是在互联网上广泛传播的前端学习地图.许多初学者说,当他们 ...
html 表单自动数值,web前端学习技术之对HTML5 智能表单的理解
原标题:web前端学习技术之对HTML5 智能表单的理解 Html5新增input的form属性,用于指向特定form表单的id,实现input无需放在form标签之中,即可通过表单进行提交. - t ...
前端学习路线_前端学习路线图
2020年全新前端学习路线图分享给大家! 学习是一个循序渐进的过程,是一件非常难得坚持的事情.如果真的想学习前端开发,一定要下决心! 我这里分享给你的前端学习路线图,希望对你有帮助,以下为2020年更 ...
react实战项目_前端学习路线图--从网页设计到项目开发
前端学习路线是螺旋上升的,需要耗费的时间和精力不比其他编程的少,由于其稳健性的特点,使其成为大多数企业开发的刚需编程语言.在网上看到有很多的前端学习路线图,但大部分的前端学习路线图是很零碎的,没有系统 ...
黑马程序员：从零基础到精通的前端学习路线
黑马程序员:从零基础到精通的前端学习路线随着互联网的深入发展,前端开发工程师一跃成为市场上非常抢手的人才.很多同学,包括以前做UI的.Java的.或者对于IT完全零基础的同学都想学习前端.下图是网上 ...
2020年最新前端学习路线
这段日子在 B 站上收到小伙伴最多的要求就是出一个前端学习路线,我能够充分的感受到大家抓耳挠腮加挠墙的迷茫~所以在这里给大家总结了一套前端学习路线.先从初级前端工程师所需的技能开始,然后一路升级到高级 ...

前端学习--HTML

前端学习--HTML相关推荐

最新文章

热门文章