07-HTML标签

2018-11-29 本文已影响8人努力爬行中的蜗牛

前端开发

前端开发也叫做web前端开发，它指的是基于web的互联网产品的页面开发及功能开发。

html

HTML是HyperText Mark-up Language的首字母简写，意思是超文本标记语言，超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm，一个html文件就是一个网页，hmtl文件用编辑器打开显示的是文本，，可以用文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，显示的网页可以从一个网页链接跳转到另一个网页。

html文档类型

xhmtl和html5
xhtml 1.0 是html5之前的一个旧版本。

html标题标签

通过<h1>、<h2>、<h3>、<h4>、<h5>、<h6>，标签可以再网页上定义6种级别的标题。6中级别的标题表示文档的6级目录层级关系，比如说：<h1>用作主标题，其后是<h2>,再其次是<h3>,一次类推。搜索引擎使用标题将网页的结构和内容编制索引，所以网页上使用标题是很重要的。

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>

html段落标签、换行标签与字符实体

html段落标签
<p>标签定义一个文本段落，一个段落含有默认的上下间距，段落之间会用这种默认间距隔开。

<p></p>

html字符实体

空格： 
小于"<" ：<
大于“>"：>

换行标签

<br />

<!DOCTYPE html>
<!-- 文档声明 -->
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>个人主页</title>
</head>
<body>
    你好，欢迎访问我的个人主页！
    <h1>html简介</h1>
    <p>&nbsp;&nbsp;HTML是HyperText Mark-up Language的首字母简写，意思是超文本标记语言，超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm.<br />一个html文件就是一个网页，hmtl文件用编辑器打开显示的是文本，，可以用文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，显示的网页可以从一个网页链接跳转到另一个网页。</p>
    <p>10 &gt; 5</p>
    <p>2 &lt; 8</p>
</body>
</html>

html块标签、含样式的标签

html块标签
1.<div>标签块元素，表示你一块内容，没有具体的含义，div标签默认是不带样式的。
2.<span>标签行内元素，表示一行中的一小段内容，没有具体的语义

含样式和语义的标签
1.<em>标签行内元素，表示语气中的强调词
2.<i>标签行内元素，表示专业词汇
3.<b>标签行内元素，表示文档中的关键字或者产品名
4.<strong>标签行内元素，表示非常重要的内容

语义化的标签
语义化的标签，就是在布局的时候多使用有语义的标签，搜索引擎在爬网的时候能认识这些标签，理解文档的结构，方便网站的收录。比如：h1标签是表示标题，p标签是表示段落，ul、li标签是表示列表，a标签表示链接，dl、dt、dd表示定义列表等，语义化的标签不多。

<!DOCTYPE html>
<!-- 文档声明 -->
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>块标签</title>
</head>
<body>

    <div>
        <h1>html概述</h1>
        <p>
            HTML是<sapn>HyperText Mark-up Language</sapn>的首字母简写，意思是超文本标记语言，超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm.<br />一个html文件就是一个网页，hmtl文件用编辑器打开显示的是文本，，可以用文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，显示的网页可以从一个网页链接跳转到另一个网页。
        </p>
        
    </div>
    <div>
        <p>
            HTML是<em>HyperText Mark-up Language</em>的首字母简写，意思是超文本标记语言，超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm.<br />一个html文件就是一个网页，hmtl文件用编辑器打开显示的是文本，，可以用文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，显示的网页可以从一个网页链接跳转到另一个网页。
        </p>
    </div>
    <div>
        <p>HTML是<i>HyperText Mark-up Language</i>的首字母简写。</p>
    </div>
    <div>
        <p>HTML是<b>HyperText Mark-up Language</b>的首字母简写</p>
    </div>
    <div>
        <p><strong>HTML是HyperText Mark-up Language的首字母简写</strong></p>
    </div>
</body>
</html>

html图像标签、绝对路径和相对路径

html图像标签
<img>标签可以在网页上插入一张图片，它是独立使用的标签，它的常用属性有：

src属性：定义图片的引用地址
alt属性：定义图片加载失败时显示的文字，搜索引擎会使用这个文字搜路图片、盲人读屏软件会读取这个文字让盲人识别图片，所以此属性非常重要。

绝对路径和相对路径
像网页上插入图片这种外部文件，需要定义文件的引用地址，引用外部文件还包括引用外部样式表，JavaScript等等，引用地址分为绝对地址和相对地址。

绝对地址：相对于磁盘的位置去定义文件的地址
相对地址：相对于引用文件本身去定位被引用的文件地址
绝对地址再整体文件迁移时会因为磁盘和顶层目录的改变而找不到文件，相对路径就没有这个问题。
相对路径的定义技巧：
"/" 表示当前文件所在目录下，比如“./pic.jpc"表示当前目录下的图片
"../"表示当前文件所在目录下的上一级目录

<img src="images/2.png" alt="添加图片">
<img src="../images/2.png" alt="添加图片">

html链接标签

<a>标签尅在网页上定义一个链接地址，他的常用属性有：

href属性定义跳转的地址
title属性定义鼠标悬停时弹出的提示文字框
target属性定义链接窗口打开的位置
target="_self"缺省值，新页面替换原来的页面，在原来的位置打开
target="_blank"新页面会在新开的一个浏览器窗口打开
# 表示链接到本业顶部

<a href="003img标签.html">跳转首页</a>
<a href="http://www.itcast.cn">传智播客</a>
<a href="http://www.itcast.cn"><img src="images/2.png"></a>
<a href="http://www.itcast.cn" title="跳转传智的网站" target="__blank">传智播客</a>
<!-- # 表示链接到本业顶部 -->
<a href="#">缺省链接</a>

html列表

有序列表
在网页上定义一个有编号的内容列表可以用<ol>、<li>配合使用来实现

<ol>
    <li>html</li>
    <li>css</li>
    <li>javascript</li>
</ol>

无序列表
在网页上定义一个无编号的内容列表可以用<ul>、<li>配合使用来实现

<ul>
    <li><a href="#">新闻标题1</a></li>
    <li><a href="#">新闻标题2</a></li>
    <li><a href="#">新闻标题3</a></li>
</ul>

定义列表
定义列表通常用于术语的定义。<dl>标签标示列表的整体。<dt>标签定义术语的题目。<dd>标签是数据的解释。一个<dl>中可以有多个题目和和解释。

<h3>前端三大块</h3>
<dl>
    <dt>html</dt>
    <dd>负责页面的结构</dd>

    <dt>css</dt>
    <dd>负责页面的表现</dd>

    <dt>html</dt>
    <dd>负责页面的行为</dd>
</dl>

html表格

1、<table>标签：声明一个表格，他的常用属性如下：

border:定义属性的边框，设置值是数值
cellpadding:定义单元格内容与边框的距离，设置值是数值
cellspacing:定义单元格与单元格之间的距离，设置值是数值
align：设置整体表格相对于浏览器窗口的水平对齐方式，设置值有：left | center | right

2、<tr>标签：定义表格中的一行
3、<td>和<th>：定义一行中的一个单元格，td代表普通单元格，th表示表头单元格，他们的常用属性如下：

align 设置单元格内容的水平对齐方式，设置值有：left | center | right
valign 设置单元格中内容的垂直对齐方式 top | middle | bottom
colspan 设置单元格水平合并，设置值是数值
rowspan 设置单元格垂直合并，设置值是数值

<!DOCTYPE html>
<html>
<head>
    <title>表格</title>
</head>
<body>
    <h3>表格</h3>

    <table border="1" width="300" height="200" align="left" cellpadding="5" cellspacing="10">
        <tr>
            <th>1</th>
            <th>2</th>
            <th>3</th>
        </tr>

        <tr>
            <td align="center">1</td>
            <td align="center">2</td>
            <td align="center">3</td>
        </tr>

        <tr>
            <td valign="top">1</td>
            <td>2</td>
            <td>3</td>
        </tr>

        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
    </table>

</body>
</html>

表格demo

<!DOCTYPE html>
<html>
<head>
    <title>表格</title>
</head>
<body>
    <table border="1" width="700" height="300" align="center">
        <tr>
            <td colspan="5">基本情况</td>
        </tr>

        <tr>
            <td width="15%"></td>
            <td width="25%"></td>
            <td width="15%"></td>
            <td width="25%"></td>
            <td rowspan="5" width="20%"><img src="images/girl.jpg" alt="美女"></td>
        </tr>

        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>

        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>

        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>

        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>

</body>
</html>

页面布局

布局也可以叫做排版，它指的是把文字和图片等元素按照我们的意愿有机的排列在页面上，布局的方式分为两种：
1、table布局：通过table元素将页面空间划分成若干个单元格，将文字或者图片等元素放入单元格中，隐藏表格的边框，从而实现布局。这种布局方式也叫传统布局，目前主要使用在EDM（广告邮件中的页面）中，主流的布局方式不用这种。
2、HTML+CSS布局（DIV+CSS）：主要通过CSS样式设置来布局文字或图片等元素，需要用到CSS盒子模型、盒子类型、CSS浮动、CSS定位、CSS背景定位等知识来布局，它比传统布局要复杂，目前是主流的布局方式。

table布局以及实例
table来做整体页面的布局，布局的技巧归纳为如下几点：
1、按照设计图的尺寸设置表格的宽高以及单元格的宽高。
2、将表格border、cellpadding、cellspacing全部设置为0，表格的边框和间距就不占页面空间，它只起到划分空间的作用。
3、针对复杂的布局，可以在单元格里面在嵌套表格，嵌套表格划分局部的空间。
4、单元格的元素或者嵌套的表格用align和valing设置对齐方式。
5、通过属性或者css样式设置单元格中元素的样式。

<!DOCTYPE html>
<html>
<head>
    <title>个人简历</title>
</head>
<body topmargin=0>
    <table width="800" height="800" border="0" cellpadding="0" cellspacing="0" align="center">

        <tr>
            <td width="260" valign="top" bgcolor="#f2f2f2">
                <table width="200" border="0" cellspacing="0" cellspacing="0" align="center">
                    <tr>
                        <td height="100"></td>
                    </tr>
                    <tr>
                        <td><img src="images/person.png"></td>
                    </tr>
                    <tr>
                        <td align="right">张大山</td>
                    </tr>
                    <tr>
                        <td align="right">13812345678</td>
                    </tr>
                    <tr>
                        <td align="right">zhangdasan@126.com</td>
                    </tr>
                </table>
            </td>
            <td width="30"></td>
            <td width="480" valign="top">
                <table width="480" border="0" cellspacing="0" cellspacing="0">
                    <tr>
                        <td height="80"></td>
                    </tr>
                    <tr>
                        <td align="right"><img src="images/resume.png" alt="简历图片"></td>
                    </tr>
                </table>

                <hr>

                <table width="480" height="200" border="0" cellspacing="0" cellspacing="0">
                    <tr>
                        <td colspan="2"><b>个人基本情况</b></td>
                    </tr>
                    <tr>
                        <td><b>姓名：</b>张大山</td>
                        <td><b>籍贯：</b>背景昌平</td>
                    </tr>
                    <tr>
                        <td><b>性别：</b>男</td>
                        <td><b>身高：</b>175</td>
                    </tr>
                    <tr>
                        <td><b>名族：</b>汉</td>
                        <td><b>体重：</b>70kg</td>
                    </tr>
                    <tr>
                        <td><b>出生日期：</b>193.08.03</td>
                        <td><b>电话：</b>13812345678</td>
                    </tr>
                    <tr>
                        <td><b>现居住地：</b>昌平天通苑</td>
                        <td><b>专业：</b>工业设计</td>
                    </tr>
                </table>

                <br>
                <br>

                <table width="480" height="80" border="0" cellspacing="0" cellspacing="0">
                    <tr>
                        <td><b>教育背景及工作经历</b></td>
                    </tr>
                    <tr>
                        <td><b>2008.09-2011.06</b> 背景有点学院 工业设计</td>
                    </tr>
                    <tr>
                        <td><b>2011.07-2012.07</b> 就职于背景微信科技有限公司，担任前端工程师</td>
                    </tr>
                </table>

                <br>
                <br>

                <table width="480" height="80" border="0" cellspacing="0" cellspacing="0">
                    <tr>
                        <td><b>所获证书</b></td>
                    </tr>
                    <tr>
                        <td><b>2009年：</b> 荣获“高级美术设计师”证书</td>
                    </tr>
                    <tr>
                        <td><b>2009年：</b> 荣获优秀班干部证书</td>
                    </tr>
                </table>
            </td>
            <td width="30"></td>
        </tr>
        
    </table>

</body>
</html>

hmtl表单

表单young与搜集不同类型的用户输入，表单由不同类型的标签组成，相关标签即属性用法如下：
1、<form>标签定义整体的表单区域

action属性定义表单数据提交地址
method尚需经定义表单提交的方式，一般有“get”方式和“post"方式

2、<label>标签，为表单元素定义文字标注

for属性用于激活input输入框需要定义input的id属性

3、<input>标签，定义通用的表单元素

type属性
type="text"定义单元文本输入框
type="password"定义密码输入框
type="radio"定义单选框
type="checkbox"定义复选框
type="file"定义上传文件
type="submit"定义提交按钮
type="rest"定义重置按钮
type="image"定义图片作为提交按钮，用src属性定义图片地址
type="hidden"定义一个隐藏的表单域，用来存储值
value属性定义表单元素的值
name属性定义表单元素的名称，此名称是提交数据时的键名

4、<textarea>标签定义多行文本输入框

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>表单</title>
</head>
<body>
    <h3>注册表单</h3>
    <!-- action空为提交到本地 method 默认是get-->
    <form action="">
        <p>
            <label for="username">用户名：</label>
            <input type="text" name="username" id="username">
        </p>
        
        <p>
            <label for="password">密&nbsp;&nbsp;&nbsp;码：</label>
            <input type="password" name="password" id="password">
        </p>
        
        <p>
            <label>性&nbsp;&nbsp;&nbsp;别：</label>
            <input type="radio" name="gender" value="0" id="male"> <label for="male">男</label>
            <input type="radio" name="gender" value="1" id="female"> <label for="female">女</label>

        </p>

        <p>
            <label>爱&nbsp;&nbsp;&nbsp;好：</label>
            <input type="checkbox" name="like" value="xiaqi"> 下棋
            <input type="checkbox" name="like" value="swim"> 游泳
        </p>

        <p>
            <label>照&nbsp;&nbsp;&nbsp;片</label>
            <input type="file" name="">
        </p>

        <p>
            <label>个人介绍：</label>
            <textarea name="infroduce"></textarea>
        </p>

        <p>
            <label>籍&nbsp;&nbsp;&nbsp;贯：</label>
            <select name="site">
                <option value="0">北京</option>
                <option value="1">上海</option>
                <option value="2">广州</option>
                <option value="3">深圳</option>
                <option value="4">四川</option>
            </select>
        </p>

        <p>
            <input type="submit" name="" value="提交">
            <!-- <input type="image" src="images/goods.jpg" name=""> -->
            <input type="reset" name="" value="重置">
        </p>

        <input type="hidden" name="hid01" value="12">
    </form>
</body>
</html>