URL地址

1.浏览器想服务器发送请求(通过http协议)
2.http协议：超文本传输协议，也就是浏览器和服务器端的网页传输数据的约束和规范
3.url协议：平时我们写的网址就是url地址
url协议：规范url地址的格式
协议规定格式：scheme://host.domain:port/path/filename

                      scheme:定义因特网服务的类型，常见的就是http。
                      host:定义域主机（http的默认主机是www）
                      domain:定义因特网域名，比如w3cschool.com.cn
                      :port:定义端口号（网页默认端口：80）
                      path:网页所在服务器的路径
                      filename:文件名称

单标签

注释标签

<!--  ddd注释  -->

在HTML中还有一种特殊的标记——注释标记。如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标记。其基本语法格式如下：

注释内容不会显示在浏览器窗口中，但是作为HTML文档内容的一部分，也会被下载到用户的计算机上，查看源代码时就可以看到。

换行标签 <br />

br.png

在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后自动换行。如果希望某段文本强制换行显示，就需要使用换行标记<br />，这时如果还像在word中直接敲回车键换行就不起作用了。

水平线标签<hr />

hr.png

在网页中常常看到一些水平线将段落与段落之间隔开，使得文档结构清晰，层次分明。这些水平线可以通过插入图片实现，也可以简单地通过标记来完成，<hr />就是创建横跨网页水平线的标记。其基本语法格式如下：
<hr />是单标记，在网页中输入一个<hr />，就添加了一条默认样式的水平线。

双标签

<p>文本内容</p> 段落标记

p.png

在网页中要把文字有条理地显示出来，离不开段落标记，就如同我们平常写文章一样，整个网页也可以分为若干个段落，而段落的标记就是<p>。

<p>是HTML文档中最常见的标记，默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行。

特点：上下自动生成空白行。
换行不会生成空白行。

标题标签

h1-h6 取值到h6

h1 在一个页面里只能出现一次。

1.png

文本标签

<font>文本内容</font>

font.png

文本格式化标签

文本加粗标签 <strong></strong> <b></b> 工作里尽量使用strong

strong.png

文本倾斜标签

<em></em> <i></i> 工作里尽量使用em

em.png img.png

删除线标签

<del></del> <s></s> 工作里尽量使用del

del.png

下划线标签

<ins></ins> <u></u> 工作里尽量ins

ins.png
◆注意：之所以工作里使用<strong></strong> <em></em> <del></del>
<ins></ins> 是因为更有语义化。

图片标签

Src    图片的来源   必写属性
Alt    替换文本    图片不显示的时候显示的文字
Title   提示文本    鼠标放到图片上显示的文字
Width  图片宽度
Height  图片高度

相对路径

image.png

相对于文件自身出发，就是相对路径。
文件和图片（html文档）在同一个目录(文件夹) ，直接写文件名。

<img src="lzl.jpg"  alt="林志玲"  title="我的女神"   />

◆图片（html文档）在文件在下一级目录里。文件夹名称+/+图片（html）名称

<img src="志玲/lzl.jpg" alt="" />

◆图片（html）在文件的上一级目录里，..+/+图片（html）名称

<img src="../lzl.jpg" alt="" />

◆图片在文件的上一级的其他目录里，../文件夹名称/图片名称

<img src="../01-ppt/llj.jpg" alt="" />

★总结：找到下一级目录（文件夹）的图片（文件）用 / 跳出当前目录使用../

绝对路径

image.png

<!-- 电脑上绝对路径 -->
<img src="F:\前端与移动开发学院\14期\html基础一上课资料\03-练习\1.gif" alt="" />

超链接

<a href="03图片标签.html" title="图片标签" target="_self">超链接</a>
<a href="03图片标签.html" title="图片标签" target="_blank">超链接</a>

href 去往的路径（跳转的页面） 必写属性
title 提示文本 鼠标放到链接上显示的文字
target=”_self” 默认值 在自身页面打开（关闭自身页面，打开链接页面）
Target=”_blank” 打开新页面 （自身页面不关闭，打开一个新的链接页面）
<base /> 可以设置整体链接的打开状态

锚链接

image.png

1.先定义一个锚点

<p id="sd">新浪娱乐讯 7月26日，

2.超链接到锚点

<a href="#sd">回到顶部</a>

空链 不知道链接到那个页面的时候，用空链

<a href="#">空链</a>

压缩文件下载 不推荐使用

<a href="../../1-1ppt.rar">压缩包</a>

超链接优化写法

<base target="_blank">   让所有的超链接都在新窗口打开

特殊字符.png

有序列表

<ol>
<li></li>    列表项
<li></li>
<li></li>
</ol>
    <!-- 有序列表 -->
    <ol  start="3">
        <li>日本经济被掐断 安倍欲哭无泪</li>
        <li>大中华区继续领跌苹果新财报</li>
        <li>大中华区继续领跌苹果新财报</li>
        <li>大中华区继续领跌苹果新财报</li>
        <li>大中华区继续领跌苹果新财报</li>

    </ol>

type=”1,a,A,i,I” type的值可以为1,a,A,i,I
start=”3” 决定了开始的位置。

无序列表

<ul>
<li></li>    列表项
<li></li>
<li></li>
</ul>
<ul type="disc">
    <li>习近平就阿富汗恐袭致慰问电</li>
    <li>习近平就阿富汗恐袭致慰问电</li>
    <li>习近平就阿富汗恐袭致慰问电</li>
    <li>习近平就阿富汗恐袭致慰问电</li>
</ul>

type=”square” 小方块
Type=”disc” 实心小圆圈
Type=”circle” 空心小圆圈

自定义列表

<!-- 自定义列表 -->
    <dl>
        <dt>帮助中心</dt>
        <dd>购物指南</dd>
        <dd>订单操作</dd>
        <dd>账户管理</dd>
    </dl>

音乐标签

<!-- 音乐标签 -->
<embed src="1.mp3" hidden="true">

滚动标签

滚动标签.png

meta 标签介绍

1.meta：元数据（metadate）是关于数据的信息。
<meta>标签是提供html文档的元数据。元数据不会在网页上显示出来，是对机器可读的。典型的就是通过meta标签可以设置网页的关键字，网页描述，文档作者等。

2.meta 的属性有两种：name和http-equiv

name属性

name属性主要用于描述网页，对应于content（网页内容）

 <meta name="Generator" contect="">用以说明生成工具（如Microsoft FrontPage 4.0）等； 
 <meta name="KEYWords" contect="">向搜索引擎说明你的网页的关键词； 
 <meta name="DEscription" contect="">告诉搜索引擎你的站点的主要内容； 
 <meta name="Author"  contect="你的姓名">告诉搜索引擎你的站点的制作的作者； 
 <meta name="Robots"contect="all|none|index|noindex|follow|nofollow"> 
其中的属性说明如下： 
        设定为all：文件将被检索，且页面上的链接可以被查询；
        设定为none：文件将不被检索，且页面上的链接不可以被查询;
        设定为index：文件将被检索；
        设定为follow：页面上的链接可以被查询；
        设定为noindex：文件将不被检索，但页面上的链接可以被查询;
        设定为nofollow：文件将不被检索，页面上的链接可以被查询。　　

http-equiv属性

<meta http-equiv="Content-Type"   contect="text/html";     charset=gb_2312"> 
<meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn" />
网页重定向

Link标签

1：引用外部css
2: 引用title图片 （icon) 例如： <link rel="icon" href="1.icon">

<!-- 链接外部样式表文件 -->
<link rel="stylesheet" href="1.css">

<!-- icon图标 -->
<link rel="icon" href="favicon.ico">

字符集（charset）

• utf-8是目前最常用的字符集编码方式，常用的字符集编码方式还有>* gbk和gb2312
• gb2312 简单中文
• GBK包含全部中文字符 繁体
• BIG5 繁体中文
• UTF-8则包含全世界所有国家需要用到的字符

HTML表格

<table>

<table>...</table>标签用于在HTML文档中创建表格。它包含表名和表格本身内容的代码。表格的基本单元是单元格，用<td>...</td>标签定义。

<tr>

表格行用<tr>标签定义，由单元格构成。多个行结合在一起就构成一个表格，这反映在用于创建表格的HTML语法中。表格的每一行都用<tr>标签表示，并用相应的</tr> 结束

<td>

表格的每一行又有若干表格单元格，用<td>...</td>标签表示。TD是"表格数据( Table Data)”的英文缩写。<td>标签定义一个列，嵌套于<tr>标签内。
border属性是最常用的属性，可用于定义表格的单元格和结构。该属性指定边框的厚度，如果其值设置为零(0)，则不显示边框。

代码：

<table border="4" width="500" height="300" cellspacing="12" cellpadding="10" align="center" bgcolor="yellow">
     <tr align="center">
        <td>张三</td>
        <td>18</td>
        <td>挖掘机</td>
     </tr>
     <tr>
        <td>马六</td>
        <td>20</td>
        <td>大前端</td>
     </tr>
    </table>

表格的属性

表格的属性.png

表格的标准结构

<table>
<thead>
<tr>
<td></td>
<td></td>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
</tr>
</tfoot>
</table>

表头和单元格合并

1.表头<caption></caption>

caption 元素定义表格标题
colspan=”2” 合并同一行上的单元格
rowspan=”2” 合并同一列上的单元格

caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。

表头<caption></caption>

表格标题、边框颜色、内容垂直对齐

表头一般位于表格的第一行或第一列，其文本加粗居中，如下图所示，即为设置了表头的表格。设置表头非常简单，只需用表头标记<th></th>替代相应的单元格标记<td></td>即可。
◆表格标题 <th></th>用法和td一样

标题的文字自动加粗水平居中对齐

<tr>
    <th>张三</th>
    <th>20</th>
    <th>大前端</th>
</tr>

◆边框颜色

bordercolor="red"

◆内容垂直对齐方式

<td valign="bottom">张三</td>

Valign=”top | middle | bottom”

图片1.png

表单（form）

-常见的表单：银行开户，学籍录入，网上注册信息等等。。
表单的作用：主要负责数据采集功能。
对于表单构成中的表单控件、提示信息和表单域，初学者可能比较难理解，对他们的具体解释如下：

• 表单控件：包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。
• 提示信息：一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。
• 表单域：他相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。

表单域

<form name="from_name" action="1.php" method="post">……</form>

属性：action:处理信息
Method=”get | post”
Get通过地址栏提供（传输）信息，安全性差。
Post 通过1.php来处理信息，安全性高。
name:定义表单的名称
Fieldset：把表单分组
Legend：分组名称

文本输入框

<!-- 文本输入框 -->
用户名:<input type="text" maxlength="6"  name="username" value="大前端">

maxlength="6" 限制输入字符长度
readonly=”readonly” 将输入框设置为只读状态（不能编辑）
disabled="disabled" 输入框未激活状态
name="username" 输入框的名称
value="大前端" 将输入框的内容传给处理文件

密码输入框

<!-- 密码输入框 -->
密码:<input type="password" name="pwd">

注意：文本输入框的所有属性对密码输入框都有效。

单选框

<!-- 单选框 -->
<input type="radio" name="gender" checked="checked">男

<input type="radio" name="gender">女

只有将name的值设置相同的时候，才能实现单选效果。
checked=”checked” 设置默认选择项。

下拉列表

<select>
<option>下拉列表选项</option>
<option>下拉列表选项</option>
</select>
省(市)： <select>
                    <option>河北</option>
                    <option>山西</option>
                    <option>山东</option>
                    <option selected="selected">北京</option>
                </select>
                <!-- 下拉列表多选 -->
                <select multiple="multiple">
                    <option>河北</option>
                    <option>山西</option>
                    <option>山东</option>
                    <option selected="selected">北京</option>
                </select>

属性：
Multiple=”multiple” 将下拉列表设置为多选项
Selected=”selected” 设置默认选中项目

市(区):<select>
              <!-- 下拉列表信息分组 -->
                <optgroup label="北京市">
                <option>昌平区</option>
                <option>海淀区</option>
                <option>朝阳区</option>
                <option>大兴区</option>
                </optgroup>
                <optgroup label="广州市">
                <option>昌平区</option>
                <option>海淀区</option>
                <option>朝阳区</option>
                <option>大兴区</option>
                </optgroup>
               </select>

<optgroup></optgroup> 对下拉列表进行分组。
Label=”” 分组名称。

多选框

<!-- 多选框 -->
<input type="checkbox" checked="checked">喝酒
 <input type="checkbox" checked="checked">抽烟
 <input type="checkbox" checked="checked">烫头

Checked=”checked” 设置默认选中项

多行文本框

<!-- 多行文本框 -->
<textarea cols="130" rows="10"></textarea>

Cols 控制输入字符的长度。
Rows 控制输入的行数

文件上传控件

<!-- 文件上传控件 -->
<input type="file">

文件提交按钮

文件提交按钮
<input type="submit">

可以实现信息提交功能

普通按钮

普通按钮 
<input type="button" value="普通按钮">

不能提交信息，配合JS使用

图片按钮

<!-- 图片按钮 -->
<input type="image" src="按钮.jpg">

图片按钮可实现信息提交功能

重置按钮

<!-- 重置按钮 -->
<input type="reset">

将信息重置到默认状态

表单信息分组

<form action="1.php" method="post">
    <fieldset>
    <legend>分组信息</legend>
    </fieldset>
</form>

Html5表单补充

HTML5表单补充.png image.png

标签语义化

标签语义化概念：

根据内容的结构化（内容语义化），选择合适的标签（代码语义化）

标签语义化意义：

   1:网页结构合理
   2:有利于seo:和搜索引擎建立良好沟通，有了良好的结构和语                          义你的网页内容自然容易被搜索引擎抓取；
   3:方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）
   4:便于团队开发和维护

标签语义化（注意事项）

• 尽可能少的使用无语义的标签div和span；
• 在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；
• 不要使用纯样式标签，如：b、font、u等，改用css设置。
• 需要强调的文本，可以包含在strong或者em标签中strong默认样式是加粗（不要用b），em是斜体（不用i）；