web前端HTML基础

一.  字体标签:

 h1~h6、<font>、<u>、<b>、<strong>、<em>、<sup>、<sub>

• 粗体标签<b> 或 <strong> （已废弃）
• 下划线标记<u> 、中划线标记<s> （已废弃）、
• 斜体标记<i> 或 <em> （已废弃）

二. 排版标签:

<p>段落标签, 里面只能放文字,图片,表单元素.

<div>块级标签 和 <span>行内标签, 是专门定义css的.

在网页中单独加入<div>和<span>,不会对网页产生影响.

<div>是容器标签,

<span>是文本级标签

只能放文字 图片 表单元素

不能放 p h ul dl ol div

<br/>换行标签

<hr/>水平分割线

三 超链接标签<a>

1)外部连接: 连接到外部文件.

<a href=“new.html”>点击进入到新网页</a> 或

<a href=http://www.baidu.com target=“_blank”>进入百度</a>

“_blank”是新建一个窗口打开网页

<a>文本级标签

2)锚连接

指给超链接起一个名字，作用是在本页面或者其他页面的不同位置进行跳转。比如说，在网页底部有一个向上的箭头，点击箭头后回到顶部，这个就是利用到了锚链接。

首先创建一个锚点,利用name或者id属性给特定位置起个名字.比如

<h1 name="top">这是顶部标题</h1>

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

上述代码中，h1标签元素这个锚叫做top。然后在底部设置超链接a，点击时将回到顶部（此时，网页中的url的末尾也出现了#top），注意href值中的#不要忘记了，表示跳到名为top的特定位置，这是规定

如果我们将a标签的代码改成<a href="new.html#top">回到顶部</a>,就表示，点击之后，跳转到new.html页面的top锚点中去。

3)邮件连接

4)特殊连接:

       a、返回页面顶部的位置：<a href="#">跳转到顶部</a>

       b、与js有关：

              (1) javascript:; 表示什么都不执行，这样点击<a>时就没有任何反应，例如：

　　　　<a href="javascript:;">内容</a>　　　

　　　　<a href="javascript:void(0);">内容</a>

　　　　我们可以这样写来阻止a标签的默认点击行为。

　　(2) javascript: 是表示在触发<a>默认动作时，执行一段javascript代码。例如：

　　　　<a href="javascript:alert(1)">内容</a>

5)超链接的属性

href：目标URL；

　　title：悬停文本；

　　name：主要用于设置一个锚点的名称；

　　target：告诉浏览器用什么方式来打开目标页面；target属性有以下几个值：

　　　　_self：在同一个网页中显示（默认值）

　　　　_blank：在新的窗口中打开。

　　　　_parent：在父窗口中显示

　　　　_top：在顶级窗口中显示

　　　　blank就是“空白”的意思，表示新建一个空白窗口。为啥有一个_ ，就是规定，没啥好解释的。

　　　　也就是说，如果不写target=”_blank”那么就是在相同的标签页打开，如果写了target=”_blank”，就是在新的空白标签页中打开。

四 图片标签<img/>

Img:代表一张图片.

Img是自封闭标签,也叫单标签.

1)  能够插入的图片类型有：jpg（jpeg）、gif、png、bmp

2)  Src属性:图片的相对路径和绝对路径

html页面不是直接插入图片，而是插入图片的引用地址，所以也要把图片上传到服务器上。

这里涉及到图片的一个属性：src属性：指图片的路径。

路径有2中写法:相对路径和绝度路径.

a)    相对路径 

就是相对当前页面的路径. 有两个标记一个点 . 表示当前目录,两个点 .. 表示父级目录

当前目录中的图片写法: <img src=”2.jpg”> 或者 <img src=”./2.jpg”>

上一级目录中的图片:<img src”../2.jpg”>

b)    绝对路径

               从盘符开始的路径, <img src="C:UsersaaaDesktophtml-01images1.jpg">

              网络路径, <img src="http://www.baidu.com/2016040102.jpg">

相对路径的好处：站点不管拷贝到哪里，文件和图片的相对路径关系都是不变的。

      相对路径使用有一个前提，就是网页文件和你的图片，必须在一个服务器上。

3)  img标签的其他属性

宽度

height:高

title:提示性文本,鼠标悬停时出现的文本

align:图片水平对齐的方式,属性有left right center

alt:图片显示不出来的时候,文本显示的内容

4)  注意事项

a)     文本级标签在浏览器上显示的时候,不管图片和文字差别有多高, 总会”底边对齐, 高矮不齐”

b)     如果要保证图片等比例缩放,只需要设置一个width 或者 height 一个就可以

c)      如果要实现图文混合排放的效果, 就使用align 属性,取值left或者 right

d)     如果想点击图片跳转某一个连接的时候:

<a href="跳转的目标地址">

                   <img src="images/bojie.jpeg" alt="波姐" title='波多野结衣'>

　　　　</a>

五 特殊字符:

     &nbsp;：空格 （non-breaking spacing，不断打空格）

　　&lt;：小于号（less than）

　　&gt;：大于号（greater than）

　　&amp;：符号&

　　&quot;：双引号

　　&apos;：单引号

　　&copy;：版权©

　　&trade;：商标™

比如说，你想把<p>作为一个文本在页面上显示，直接写<p>是肯定不行的，因为这代表的是一个段落标签，所以这里需要用到特殊字符。代码应该这么写：

这是一个HTML语言的&lt;p&gt;标签.  效果显示：

　　　　

------------------------------------华丽分隔线---------------------------------

一 列表标签

1. ul 无序列表标签(常用的)

       <ul>

              <li>第一个</li>

              <li>第二个</li>

              <li>第三个</li>

       </ul>

总结:li不能单独存在; 列表之间可以嵌套(li是一个容器标签,li里面什么都可以放. 甚至可以再放一个ul)

1. ol 有序列表标签, 跟ul一样. ol用的不多

<ol>

        <li>第一个</li>

        <li>第二个</li>

        <li>第三个</li>

</ol>

1. dl 定义标签

       dl(definition list)没有属性,dl的子元素只有dt, dd

       <dl> 标签与 <dt> （定义项目/名字）和 <dd> （描述每一个项目/名字）一起使用。如下示例：

<dl>

        <dt>站点信息</dt>

        <dd>意见反馈</dd>

        <dd>关于我们</dd>

        <dd>免责声明</dd>

        <dd>文章归档</dd>

    </dl>

       或者：

    <dl>

        <dt>Coffee</dt>

        <dd>- black hot drink</dd>

        <dt>Milk</dt>

        <dd>- white cold drink</dd>

    </dl>

总结：

              1）dt（definition title）列表的标题，这个标签是必须写的；

              2）dd（definition description）列表的列表项，如果不需要它，可以不加；

              3）定义列表用法很灵活，可以一个dt配多个dd，也可以让每一个dl里只有一个dt和dd；

　　　　4）dt，dd都是容器级标签，想放什么都可以，所以现在应该更加清晰的知道：用什么标签，不是根据样子来决定，而是语义（语义本质上是结构）；

二 table标签

<table>表格标签, 表格是由行<tr>组成的,行是由列<td>或者<th>组成的.

<table>

        <tr>

            <th>Header 1</th>

            <th>Header 2</th>

        </tr>

        <tr>

            <td>row 1, cell 1</td>

            <td>row 1, cell 2</td>

        </tr>

        <tr>

            <td>row 2, cell 1</td>

            <td>row 2, cell 2</td>

        </tr>

</table>

1)    单元格的合并

如果要合并两个单元格,肯定要删除一个单元格

横向合并:colspan, 例如colspan=”2”表示当前单元格在水平方向上要占据两个单元格的位置

纵向合并: rowspan, 例如rowspan=”2”表示当前单元格在垂直方向上占据两个单元格的位置

<table border="1">

        <tr>

            <th colspan="2">userinfo</th>

        </tr>

        <tr>

            <td >First Name:</td>

            <td>Bill Gates</td>

        </tr>

        <tr>

            <td rowspan="2">Telephone:</td>

            <td>555 77 854</td>

        </tr>

        <tr>

            <td>555 77 855</td>

        </tr>

</table>

2)    <caption>: 表格的标题,使用时和<tr>标签并列

3)    表格的<thead>标签,<tbody>标签,<tfoot>标签

a)     如果写了，那么这三部分的代码顺序可以任意，浏览器显示的时候还是按照thead、tbody、tfoot的顺序依次来显示内容。如果不写thead、tbody、tfoot，那么浏览器解析并显示表格内容的时候是从按照代码的从上到下的顺序来显示

b)     当表格非常大内容非常多的时候，如果用thead、tbody、tfoot标签的话，那么数据可以边获取边显示。如果不写，则必须等表格的内容全部从服务器获取完成才能显示出来。

三 form表单(结合JS)

表单标签用<form>表示,用于和服务器的交互. 表单就是收集用户信息,让用户填写和选择.

属性:

1)    action: 指定表单数据的处理程序, 一般是PHP, 比如 action=”login.php”

2)    method: 表单数据的提交方式, 一般取值: get(默认)  和  post

action属性就是表示将表单提交到哪里。

method属性表示用什么http方法提交，有get、post两种。

1. get方式:

将表单数据以”name=value”形式追加到action指定的处理程序后面. 两者间用“？”隔开，每一个表单的“name=value”间用“&”号隔开。

特点：只适合提交少量信息，并且不太安全（不要提交敏感数据），url中能看到提交的数据，提交的数据类型只限于ASCII字符。

1. post方式:

将表单数据(隐藏,url中不显示)直接发送到action指定的处理程序. Post发送的数据url不可见.

action指定的处理程序可以获取到表单数据.

特点: 可以提交海量信息，相对来说安全一些，提交的数据格式是多样的（word、excel、rar、img）

1. enctype:

表单数据的编码方式(加密方式), 取值可以是application/x-www-form-urlencoded、multipart/form-data。

enctype只能在POST方式下使用。例如：

       <form action="" method="post" enctype=""></form>

       (1) Application/x-www-form-urlencoded：默认加密方式，除了上传文件之外的数据都可以；

       (2) Multipart/form-data：上传附件时，必须使用这种编码方式；

4.   <input>输入标签(文本框)

用于接收用户输入, 例如：<input type=”text” />

属性:

a、type=“属性值”：

(1) text（默认）：文本类型；

(2) password：密码类型；

(3) radio：单选按钮，名字相同的按钮作为一组进行单选（单选按钮，天生是不能互斥的，如果想互斥，必须要有相同的name属性。name就是“名字”）；

(4) checkbox：多选按钮，名字相同的按钮作为一组进行选择；

(5) checked：将单选按钮或多选按钮默认处于选中状态。当<input>标签的type="radio"时，可以用这个属性。属性值也是checked，可以省略；

(6) hidden：隐藏框，在表单中包含不希望用户看见的信息；

(7) button：普通按钮，结合js代码进行使用；

(8) submit：提交按钮，传送当前表单的数据给服务器或其他程序处理。这个按钮不需要写value自动就会有“提交”文字。这个按钮真的有提交功能。点击按钮后，这个表单就会被提交到form标签的action属性中指定的那个页面中去；

(9) reset：重置按钮，清空当前表单的内容，并设置为最初的默认值；

(10) image：图片按钮，和提交按钮的功能完全一致，只不过图片按钮可以显示图片；

(11) file：文件选择框；

提示：如果要限制上传文件的类型，需要配合JS来实现验证。对上传文件的安全检查：一是扩展名的检查，二是文件数据内容的检查。

b、name：表单的名称，用于JS来操作或控制表单时使用；

c、value=”内容”： 文本框里的默认内容（已经被填好了的）；

d、id：表单的名称，用于JS来操作或控制表单时使用；

e、size="50"：表示文本框内可以显示五十个字符，一个英文或一个中文都算一个字符；

g、readonly：文本框只读，不能编辑。因为它的属性值也是readonly，所以属性值可以不写。用了这个属性之后，在google浏览器中，光标点不进去；在IE浏览器中，光标可以点进去，但是文字不能编辑；

h、disabled：文本框只读，不能编辑，光标点不进去。属性值可以不写；

5. <label>标签

我们先来看这样一段代码：

<input type="radio" name="sex" /> 男

<input type="radio" name="sex" /> 女

对于上面这样的单选框，我们只有点击那个单选框（小圆圈）才可以选中，点击“男”、“女”这两个文字时是无法选中的；于是，label标签派上了用场。

本质上来讲，“男”、“女”这两个文字和input标签时没有关系的，而label就是解决这个问题的。我们可以通过label把汉字包裹起来。

解决办法:

<input type="radio" name="sex" id="nan" value=”man” /><label for="nan">男</label>

<input type="radio" name="sex" id="nv" value=”women” /><label for="nv">女</label>

上方代码中，input元素要有一个id，然后label标签有一个for属性，和input标签的id相同，那么这个label和input就有绑定关系了。任何表单元素都有label。

6.<select>:下拉列表标签

<select>标签里面的每一项用<option>表示。select就是“选择”，option“选项”。

select标签和ul、ol、dl一样，都是组标签。

属性：

<select>标签的属性：

 (1) multiple：可以对下拉列表中的选项进行多选。没有属性值；

 (2) size="2"：如果属性值大于2，则列表为滚动视图。默认属性值为1，下拉视图；<option>标签的属性：

 (1) selected：预选中。没有属性值。

例如:

<select multiple="" size=”2”>

        <option>小学</option>

        <option>初中</option>

        <option selected="">高中</option>

        <option selected="">大学</option>

        <option>研究生</option>

 </select>

7、<textarea>标签：多行文本输入框

       属性：

           name：提交给服务器的key值；

　　　　value：提交给服务器的值；

　　　　rows="4"：指定文本区域的行数；

　　　　cols="20"：指定文本区域的列数；

　　　　readonly：只读；

       代码示例：

 <textarea name="txtInfo" rows="4" cols="20" value=””>路飞学城</textarea>