html《》

py大神 · 发表于 2017-12-26 01:05:03

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由 py大神于 2018-1-1 23:14 编辑

Html和CSS的关系
1. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。
2. CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
3. JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

标签
h p header title body html 都叫标签。一般后面的加‘/’表示闭合标签。
有半闭合标签和完全闭合标签，如<html></html>是完全闭合标签，成对出现。而< meta charset="utf-8"/>是半闭合标签。
标签内包含的内容

总结一下，可以这么说，网页中每一个内容在浏览器中的显示，都要存放到各种标签中。

<!DOCTYPE html>    HTML5的版本声明

<body></body> 只有body标签内的内容才能真正显示在浏览器窗口中。

<head></head> 除了显示之外的内容

<html></html> 告诉浏览器，这是一个html标签

<title></title> 告诉浏览器，这是我的标题。
文本格式化标签：
<b> 定义粗体文本

<em> 定义着重文字效果：斜体。区别：虽然和<i>标签一样都是斜体，但<em>的语义是强调，是表达元素，而<i>的语义是无意义的倾斜，是视觉元素。

<i> 定义斜体文字

<small> 定义小号字

<strong> 定义着重语气

<sub> 上标字

<sup> 下标字

<ins> 插入字效果：会在字体底部加上下划线。

<del> 删除字效果：会在字体上加上下划线，表示删除。
计算机输出标签：
<code> 定义计算机代码

<kbd> 定义键盘码

<samp> 定义计算机代码样本

<var> 定义变量

<pre> 定义预格式文本

引文，引用，标签定义：
<abbr> 定义缩进

<address> 定义地址

<bdo> 定义文字方向

<blockquote> 定义长文本的引用

<q> 定义短的引用语

<cite> 定义引用，引证

<dfn> 定义一个定义项目

属性：每个标签都会有一堆属性，来描述这个标签的一些功能。

所有标签共有的属性：
class 为html元素定义一个或多个类名(classname)(类名从样式文件引入)(很多个标签都可以用同一个类的属性)
id 定义元素唯一的id（不同的标签里不能有相同的id名字，相同的更不行）
style 规定元素的行内样式(inline style)（样式）
title 描述了元素的额外信息(作为工具条实用)（鼠标放上去可以显示title信息）

标签自己的属性：
如：<a href=""></a>
<img src="" />

写法:
<h1 id="" class="" style="" title="">标题一</h1>

链接：<a>
可以给任何一个html元素添加链接，可以被点击，跳转到某个地址。
用法：任何一个元素上面，想让用户点击，跳转到某个页面，就可以使用

图片：<img width="可以指定宽度，如：300px"，length="可以指定长度，如：200px">当只指定宽度或者高度时，另一个会等比例变化。最好同时指定宽度和高度，并且按照图片的原宽高
        等比例缩小或者放大。（px：像素）
作用：显示一张图片
用法：任何想显示图片的地方，通常还会给图片加上链接。
当图片在代码的同级目录中时，只需要加上图片名字就行，当不在时，要用绝对路径。
<img src="../目录">表示代码所在目录的上一级目录
<img src="./目录">同样表示代码所在目录

列表：
无序列表（常用）：
<ul>
<li></li>
<li></li>
</ul>
有序列表（用的少）：
<ol>
<li></li>
</li></li>
</ol>
自定义列表（不怎么用）：
<dl>
<dt></dt>
<dd></dd>
<dd></dd>
<dt></dt>
<dd></dd>
<dd></dd>
</dl>

表格：
写法：
<table border="" cellspacing="内边框" cellpadding="外边框">详见注释1
<tr>

<th>表格头部一（会加粗显示）</th>
<th>表格头部二（会加粗显示）</th>
</tr>

<tr>
<td>第一行，第一列</td>
<td>第一行，第二列</td>
</tr>

<tr>
<td>第二行，第一列</td>
<td>第二行，第二列</td>
</tr>
</table>
用法：1.需要用表格显示的内容
   2.可以用来布局页面，但是现在已经用div布局页面了

区块：html中标签中包含的称为元素。元素分为两种类型，一种是块级元素，一种是内联元素。
块级元素：div是指一块内容的标签，div不显示任何东西，用来包含其他标签，成为一块内容，需要配合CSS样式来进行页面布局。
如：h1 p ul table 都是块级元素，会以新行来开始。
内联元素：
span标签用来包裹文字
如：b td a img 都是内联元素，通常不会以新行开始。

表单：
表单是用来在网页上显示给用户输入的标签，然后提交给后台服务器进行处理。
语法：<form action="" method=""></form>action：表单提交地址。method：表单提交形式（有post和get两种）。通过form标签把表单元素包起来
表单元素：
文本输入框：<input type="text" name="" value="默认值" />
密码输入框：<input type="password" name="" value="" placeholder="提示用户信息">（placeholder是html5的新方法）
多行文本：<textarea name="">这里是介绍的文字</textarea>
单选：<input type="radio" name="" value="" />
多选：<input type="checkbox" name="" value="">
下拉列表：<select name="">
<option value=""></option>
<option value=""></option>
</select>
提交按钮：<form name="input" action="" method="">
username:<input type="text" name="">
<input type="submit" value="Submit">
</form>

框架：
框架（iframe）可以在一个网页中的某一块内容中打开另一个网页。
写法：<iframe src="" width="" height="" name=""></iframe>
如：<iframe src="http://www.baidu.com" width="500" height="500" name="百度网址"></iframe>就可以在网页的某一块区域打开百度的页面
当有多个iframe时就可以在用一个页面中浏览多个网页。
现在这个已经用的不多了。

头部：
head标签里还要哪些？
<base href="" target="_blank">是页面中所有的连接的默认地址。
<meta name="keyword" content="">这是做SEO优化时用到的。SEO是让百度谷歌等搜索引擎能更快的找到你的网址的技术。
<meta name="description" content="">这也是做SEO优化时用到的。主要是描述你的网站是干什么用的。
<meta name="author" content="">网页作者
<meta http-equiv="refresh" content="30">这个可以让页面30秒刷新跳转一次
<link rel="stylesheet" type="text/css" href="mystyle.css">引用CSS样式。
注释1：单元格(cell) -- 表格的内容
         单元格边距(表格填充)(cellpadding) -- 代表单元格外面的一个距离,用于隔开单元格与单元格空间
         单元格间距(表格间距)(cellspacing) -- 代表表格边框与单元格补白的距离,也是单元格补白之间的距离

<h>标题标签</h>标题标签一共有6个，h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。<h1>是最高的等级。标题标签的样式都会加粗，h1标签字号最大，h2标签字号相对h1要小，以此类推h6标签的字号最小。并且标题会自动换行。

<p>段落标签</p>

<title>网页标题</title>

代码注释语法

<q>简短文本的引用</q>

<blockquote>长文本的引用</blockquote>浏览器对<blockquote>标签的解析是缩进样式

<br>换行。语法：xhtml1.0写法：<br />html4.01写法：<br>

<hr />在短落后添加横线。语法：html4.01版本 <hr>xhtml1.0版本 <hr />

 我们已经讲解过在html代码中输入空格、回车都是没有作用的&nbsp要想输入空格，必须写入 一个代表一个空格，注意后面的分号

<address>联系地址信息</address>一般网页中会有一些网站的联系地址信息需要在网页中展示出来，这些联系地址信息如公司的地址就可以<address>标签。也可以定义一个地址（比如电子邮件地址）、签名或者文档的作者身份。

<code>var i=i+300;</code>在介绍语言技术的网站中，避免不了在网页中显示一些计算机专业的编程代码，当代码为一行代码时，你就可以使用<code>标签了。注意：在文章中一般如果要插入多行代码时不能使用<code>标签了。

<pre></pre> 标签的主要作用:预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。就不用每一行加上<br>和&nbsp标签了。<pre> 标签不只是为显示计算机的源代码时用的，在你需要在网页中预显示格式时都可以使用它，只是<pre>标签的一个常见应用就是用来展示计算机的源代码。

这些列表就可以使用ul-li标签来完成。ul-li是没有前后顺序的信息列表。
语法：
<ul>
  <li>信息</li>
  <li>信息</li>
......
</ul>

<ol>在网页中显示的默认样式一般为：每项<li>前都自带一个序号，序号默认从1开始，
语法：
<ol>
<li>信息</li>
<li>信息</li>
......
</ol>

<dir>...</dir>在网页制作过程过中，可以把一些独立的逻辑部分划分出来，放在一个<div>标签中，这个<div>标签的作用就相当于一个容器。
确定逻辑部分：
什么是逻辑部分？它是页面上相互关联的一组元素。如网页中的独立的栏目版块，就是一个典型的逻辑部分。如下图所示：图中用红色边框标出的部分就是一个逻辑部分，就可以使用<div>标签作为容器。

<div  id="版块名称">…</div>这里注意使用双引号。在上一小节中，我们把一些标签放进<div>里，划分出一个独立的逻辑部分。为了使逻辑更加清晰，我们可以为这一个独立的逻辑部分设置一个名称，用id属性来为<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、表格中列的个数，取决于一行中数据单元格的个数。
总结
1、table表格在没有添加css样式之前，在浏览器中显示是没有表格线的
2、表头，也就是th标签中的文本默认为粗体并且居中显示

表格还是需要添加一些标签进行优化，可以添加标题和摘要
摘要
摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。
语法：<table summary="表格简介文本">
标题
用以描述表格内容，标题的显示位置：表格上方。
   语法：
<table>
<caption>标题文本</caption>

<a>标签可实现超链接，它在网页制作中可以说是无处不在，只要有链接的地方，就会有这个标签。
语法：<a  href="目标网址"  title="鼠标滑过显示的文本">链接显示的文本</a>

<a>标签在默认情况下，链接的网页是在当前浏览器窗口中打开，有时我们需要在新的浏览器窗口中打开。
如下代码：
<a href="目标网址" target="_blank">click here!</a>

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

注意：如果mailto后面同时有多个参数的话，第一个参数必须以“?”开头，后面的参数每一个都以“&”分隔。
下面是一个完整的实例:

<img>标签来插入图片。
语法：
<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">
讲解：
1、src：标识图像的位置；
2、alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；
3、title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；
4、图像可以是GIF，PNG，JPEG格式的图像文件。

网站怎样与用户进行交互？答案是使用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>
注意:
1、所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在 <form></form> 标签之间（否则用户输入的信息可提交不到服务器上哦！）。
2、method : post/get 的区别这一部分内容属于后端程序员考虑的问题。

当用户要在表单中键入字母、数字等内容时，就会用到文本输入框。文本框也可以转化为密码输入框。
语法：
<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>
注意：代码中的<label>标签在本章5-9中讲解。
在浏览器中显示结果：

注意这两个属性可用css样式的width和height来代替：col用width、row用height来代替。（这两个css样式在以后的章节会讲解）

<select>
<option value="提交值" selected="selected">选项名</option>
</select>
下拉列表在网页中也常会用到，它可以有效的节省网页空间。既可以单选、又可以多选
设置selected="selected"属性，则该选项就被默认选中。

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

在表单中有两种按钮可以使用，分别为：提交按钮、重置。这一小节讲解提交按钮：当用户需要提交表单信息到服务器时，需要用到提交按钮。
语法：
<input type="submit" value="提交">
type：只有当type值设置为submit时，按钮才有提交作用
value：按钮上显示的文字
举例：

在浏览器中显示的结果：

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

label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）。
语法：
<label for="控件id名称">
注意：标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。
例子：
<form>
  <label for="male">男</label>
  <input type="radio" name="gender" id="male" />
  <br />
  <label for="female">女</label>
  <input type="radio" name="gender" id="female" />
  <label for="email">输入你的邮箱地址</label>
  <input type="email" id="email" placeholder="Enter email">
</form>

[学习笔记] html《》

马上注册，结交更多好友，享用更多功能^_^

评分

本帖被以下淘专辑推荐:

账号		自动登录	找回密码
密码			立即注册