HTML

第1章、认识HTML

1、HTML、CSS、JS的定义

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

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

  3. JS
    JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

2、HTML标签

<h1></h1>    # 标题标签
<p></p>    # 段落标签
<img src='1.jpg'>    # img标签

3、HTML文件的基本结构

  1. <html>
    根标签，所有的网页标签都在<html></html>中
  2. <head>
    用于定义文档的头部，是所有头部元素的容器，头部元素有<title>、<script>、 <style>、<link>、 <meta>等。
  3. <body>...
    在<body>和</body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签，在这里的标签中的内容会在浏览器中显示出来。
  4. head标签
    文档的头部描述了文档的各种属性和信息，包括文档的标题等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
    下面这些标签可用在 head 部分：
<head>
    <title>...</title>
    <meta>
    <link>
    <style>...</style>
    <script>...</script>
</head>
  • 注释
<!--注释-->

第2章 认识标签（一）

  1. <body>标签，网页上显示的内容放在这里

  2. <p>标签，添加段落，一段文字一个标签，默认段前段后都有空白
    <p>段落文本</p>

  3. <hx>标签，给网页添加标题
    标题标签一共有6个，h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。<h1>是最高的等级。 语法： <hx>标题文本</hx> (x为1-6)

  4. <strong>标签粗体，<em>标签斜体。语义是：加强语气
    <strong>需要强调的文本</strong>
    <em>需要强调的文本</em>

  5. <span>标签，设置单独的样式用的。
    <span></span>

  6. <q>标签，短文本引用
    <q>对简文本引用文本</q>语义是：引用别人的话。
    注意：要引用的文本不用加双引号，浏览器会对q标签自动添加双引号。

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

  8. 使用<br>标签分行显示文本<br>标签作用相当于word文档中的回车。
    xhtml1.0写法：<br />
    html4.01写法：<br>
    与以前我们学过的标签不一样，<br>标签是一个空标签，没有HTML内容的标签就是空标签，空标签只需要写一个开始标签，这样的标签有<br >、<hr >和<img >。

  9. 空格
    &nbsp;

  10. <hr>标签,添加水平横线
    html4.01版本 <hr>
    xhtml1.0版本 <hr />

  11. <address>标签，默认斜体，为网页加入地址信息
    <address>联系地址信息</address>

  12. <code>标签，加入一行代码
    <code>代码语言</code>
    注：如果是多行代码，可以使用<pre>标签。

  13. <pre>主要作用:预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。
    <pre>语言代码段</pre>

第3章 认识标签（二）

1. ul-li标签，是没有前后顺序的信息列表。

ul-li在网页中显示的默认样式一般为：每项li前都自带一个圆点

<ul>
  <li>信息</li>
  <li>信息</li>
   ......
</ul>

2. ol-li标签

每项<li>前都自带一个序号，序号默认从1开始

<ol>
   <li>信息</li>
   <li>信息</li>
   ......
</ol>

3.div标签，独立逻辑容器

什么是逻辑部分？它是页面上相互关联的一组元素。
<div>…</div>

4. 给div命名

为了使逻辑更加清晰，我们可以为这一个独立的逻辑部分设置一个名称，用id属性来为<div>提供唯一的名称

<div id="版块名称" title=“xxx”>…</div>
title是div标签的一个属性，当鼠标放在div标签上时，会显示title的内容。

5. table标签

创建表格的四个元素：
table、tbody、tr、th、td
5-1、<table>…</table>：整个表格以

标记开始、
标记结束。
5-2、<tbody>…</tbody>：如果不加 , table表格加载完后才显示。加上这些表格结构， tbody包含行的内容下载完优先显示，不必等待表格结束后在显示，同时如果表格很长，用tbody分段，可以一部分一部分地显示。（通俗理解table 可以按结构一块块的显示，不在等整个表格加载完后显示。）
5-3、<tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。
5-4、<td>…</td>：表格的一个单元格，一行中包含几对...，说明一行中就有几列。
5-5、<th>…</th>：表格的头部的一个单元格，表格表头。
5-6、表格中列的个数，取决于一行中数据单元格的个数
1、table表格在没有添加css样式之前，在浏览器中显示是没有表格线的
2、表头，也就是th标签中的文本默认为粗体并且居中显示
931154-20161130132126412-893805219.png
931154-20161130132155068-768323772.png
可选属性：

align:

  • left 字体靠左，右，居中
  • center 字体靠右
  • right 字体靠居中

bgcolor：表格背景色

  • rgb(x,x,x)

  • xxxxxx

  • colorname

border:表格边框的宽度
cellpadding:单元格边缘与其内容之间的距离

  • pixels
  • %
    cellspacing:单元格之间的空白
  • pixels
  • %

6. 用css为表格加入边框

为th，td单元格添加粗细为一个像素的黑色边框。

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

7. <caption>标签，为表格添加标题和摘要

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

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

第4章 认识标签（三）

1. <a>标签,链接到另一个页面

默认是在当前窗口打开

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

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

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

1.2 <a>标签中响应onclick事件

<a href="javascript:void(0);" onclick="doSomething();">test</a> 
<a href="http://xxx/findname/" onclick="doSomething();return false">test</a> 
<a href="http://xxx/findname/" onclick="doSomething();event.returnValue=false">test</a>

1.3 使用mailto在网页中链接Email地址
<a>标签还有一个作用是可以链接Email地址，使用mailto能让访问者便捷向网站管理者发送电子邮件。
image.png
注意：如果mailto后面同时有多个参数的话，第一个参数必须以“?”开头，后面的参数每一个都以“&”分隔。不要存在空格！

<a href="mailto:yy@imocc.com?cc=xiaoming@imocc.com&bcc=xioayu
@imocc.com&subject=主题&body=邮件内容">发送</a>

image.png

2. 认识 <img>标签，为网页插入图片

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

1、src：标识图像的位置；
2、alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；
3、title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；
4、图像可以是GIF，PNG，JPEG格式的图像文件。

第5章 与浏览者交互，表单标签

1. 使用表单(form)标签，与用户交互

表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。
1.<form> ：<form>标签是成对出现的，以<form>开始，以</form>结束。
2.action ：表示当前表单中的内容提交给哪个页面进行处理。
3.method ： 数据传送的方式（get/post。默认是get提交。

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

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

2. input文本输入框、密码输入框

当用户要在表单中键入字母、数字等内容时，就会用到文本输入框。文本框也可以转化为密码输入框。

<form>
   <input type="text/password" name="名称" value="文本" />
</form>

20171004094543837.png

  • 使用提交按钮，提交数据
    <input type="submit" value="提交">
    type：只有当type值设置为submit时，按钮才有提交作用
    value：按钮上显示的文字

  • 使用重置按钮，重置表单信息
    只需要把type设置为"reset"就可以。
    <input type="reset" value="重置">
    checked定义和用法

checked 属性规定在页面加载时应该被预先选定的 input 元素。

checked 属性 与 或 配合使用。

checked 属性也可以在页面加载后，通过 JavaScript 代码进行设置。

语法

<input checked="checked">
实例
带有一个预选定复选框的 HTML 表单：

<form action="form_action.asp" method="get">
<input type="checkbox" name="vehicle" value="Car" checked="checked" /> I have a car
</form>

<form>
  姓名：
  <input type="text" name="myName">
  <br/>
  密码：
  <input type="password" name="pass">
</form>

image.png

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

<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>

image.png

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

<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" 时，该选项被默认选中
image.png
image.png
注意:同一组的单选按钮，name 取值一定要一致，比如上面例子为同一个名称“radioLove”，这样同一组的单选按钮才可以起到单选的作用。

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

5.1、value：

5.2、selected=“selected”：
设置selected="selected"属性，则该选项就被默认选中。

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

6. form表单中的label标签

为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件
注意：标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。

<label 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>

posted on 2019-04-10 09:30  louisduan66  阅读(150)  评论(0)  编辑  收藏  举报

导航