html学习

1、代码初体验,制作我的第一个网页

2、html与css的关系

html是网页内容的载体:内容就是网页制作者放在页面上想要用户浏览的信息,可以包含文字、图片、视频等。

css样式是表现:就想网页的外衣。比如:标题字体、颜色变化、或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

JavaScript是用来实现网页上的特效效果:如:鼠标滑过弹出下拉框。或者鼠标滑过表格的背景颜色改变,还有图片的轮换。可以这么理解:有动画的,有交互的一般都是用JavaScript来实现的。

3、html文件基本结构

<html></html>称为根标签,所有的网页标签都在<html></html>中。

<head></head>标签用于定义文档的头部,它是所有头部元素的容器。头部元素有:<title>、<script>、<style>、<link>、<meta>等标签。

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

4、认识<head>标签

文档的头部描述了文档的各种属相和信息,包括文档的标题等。

<title>标签:在<title></title>标签之间的文字内容是网页中的标题信息,它会出现在浏览器的标题栏中。网页的title标签用于告诉用户和搜索引擎这个网页的主要内容是什么,搜索引擎可以通过网页标题,迅速的判断出网页的主题。

5、html代码的注释

代码注释的作用就是帮助程序员标注代码的用途,多一段时间再看代码时时,能很快想起这段代码的用途。它不仅方便程序员自己回忆起以前代码的用途,还可以帮助其他程序员看得懂你的代码,方便多人合作开发网页代码。

语法:

<!-- 注释文字 -->

注释的文字是不会在窗口中显示出来的。

6、语义化

明白每个标签的用途

好处:1、更容易被搜索引擎收录。2、更容易让屏幕阅读器读出网页内容。

7、学习标签

<body>标签,网页上显示的内容放在这里。

<p>标签,添加段落

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

 

 <hx>标签,为你的网页添加标题

标题标签一共有六个,h1、h2、h3、h4、h5、h6,依据重要性递减。<h1>是最高的等级。

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

 

 加入强调语气,使用<strong>和<em>标签

两者在强调语气上的区别:<em>表示强调,<strong>表示更强烈的强调。在浏览器中<em>默认用斜体表示,<strong>默认用粗体表示。

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

<strong>需要强调的文本</strong>

 

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

语法:<span>文本</span>

 

 <q>标签,短文本引用

语法:<q>短引用文本</q>

 

 注意:要引用的文本不用加双引号,浏览器会对q标签自动添加双引号。

<blockquote>标签,长文本引用。

语法:<blockquote>引用文本</blockquote>

 

 使用<br>标签分行显示文本

 

 

 在网页上添加空格:&nbsp

 

 认识<hr>标签,添加水平横线

语法:<hr />

 

 <address>标签,为网页加入地址信息

语法:<address>联系地址信息</address>

 

 加入一行代码,使用<code>标签

语法:<code>代码语言</code>

如果是多行代码,使用<pre>标签。

<pre>标签

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

<pre>标签的主要作用:预格式化的文本,被包围在pre元素中的文本通常会保留空格与换行符。

使用ul标签,添加信息列表

 

 注意:ul-li没有前后顺序

使用ol,添加排行榜

 

 认识div在排版中的作用

<div>标签的作用就相当于一个容器。

语法:<div>...<div>

给div命名,使逻辑更加清晰

语法:<div id="名称">...</div>

 

table标签,认识网页上的表格

 

 caption标签,为表格添加标题和摘要。

摘要的内容不会在浏览器中显示出来,它的作用是增加表格的可读性,使搜索引擎更好的读懂表格内容,还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。

语法:<table summary="表格简介文本">

使用<a>标签,链接到另一个页面。

使用<a>标签可以实现超链接。

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

在新建浏览器窗口中打开链接。

<a>标签在默认的情况下,链接的网页是在当前浏览器窗口打开,有时我们需要在新的浏览器窗口打开。

<a href="目标网址" target="_blank">点击 </a>

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

<a>标签还有一个作用是可以链接Email地址,使用mailto能让访问者便捷向网站管理者发送电子邮件。我们还可以利用mailto做许多其它事情。下面一一进行讲解,请看详细图示:

 

注意:如果mailto后面同时有多个参数的话,第一个参数必须以“?”开头,后面的参数每一个都以“&”分隔。

下面是一个完整的实例:

<a href="t_test@163.com?cc=xiao@163.com&bcc=xiaoi@163.com&subject=邮件测试&body=邮件内容">发送</a>

点击链接会打开电子邮件应用,并自动填写收件人等设置好的信息,如下图:

认识<img>标签,为网页插入图片

 使用表单标签,与用户交互

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

action:浏览者输入的数据被传送到的地方

method:传送数据的方式(get/post)

文本输入框、密码输入框

type:

1、当type=text时,输入框为文本输入框;

2、当type=password时,输入框为密码输入框。

name:为文本框命名,以备后台使用。

value:为文本输入框设置默认值(一般起到提示的作用)

 

文本域、支持多行文本输入

语法:

 

 使用单选框、复选框、让用户选择

语法:

type:

1、当type=radio时,控件为单选框

2、当type=checkbox时,控件为复选框

value:提交数据到服务器的值

name:为控件命名

checked:当设置checked=checked时,该选项默认选中

 

 使用下拉框,节省空间

 

 设置selected="selected"属性,默认选中。

使用下拉框进行多选

 

 使用提交按钮,提交数据

注意:只有当type=submit时,提交按钮才有效

value:按钮上显示的文字

 

 使用重置按钮,重置表单信息

form表单中的label标签

它的作用是:为鼠标用户改进了可用性。如果在label标签内点击文本,就会触发此控件,就是说,当用户单击选中该label标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。

注意:标签的for属性中的值应当与相关控件的id属性值一样。

如果for属性中的值与id不一样,当点击label标签时就不会将焦点自动转到表单控件上,就是说,点击label没有用。

posted @ 2019-05-30 19:44  踏实每一步充实每一天  阅读(168)  评论(0编辑  收藏  举报