首页 > > 网页制作 > css >

前端之HTML

2019-05-16 23:55:25来源：博客园阅读 ()

HTML概述

前端开发概述

前端开发也叫web前端开发，它指的是基于web的互联网产品的页面(界面)开发以及功能开发。
互联网产品是指网站为满足用户需求而创建的用于运营的功能及服务。
前端开发需要的技术包括：photoshop，html，css，javascript，js库和框架。

html概述

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

不同工具打开html文件产生不同结果：
编辑器打开会是一段代码，浏览器打开会是一个网页，这是因为编辑器不认识这些html标签，而浏览器知道这是html文件后，会对html文件里面的标签进行渲染，从而渲染出一个网页；

xhtml 1.0和html5

xhtml 1.0

是html5之前的一个常用的版本，目前许多网站仍然使用此版本。
此版本文档用sublime text创建方法： html:xt + tab

html5
pc端可以使用xhtml 1.0，也可以使用html5，html5是向下兼容的;
h5对XHTML1.0进行了精简，主要是在文档声明，html标签和meta标签中，原来有W3C的广告；
此版本文档用sublime text创建方法： html:5 + tab 或者 ! + tab
区别：
1.文档声明和编码声明；
2.html5新增了标签元素和元素属性；

html文档规范

xhtml制定了文档的编写规范，html5可部分遵守，也可全部遵守，看开发要求。
1、所有的标签必须小写
2、所有的属性必须用双引号括起来
3、所有标签必须闭合
4、img必须要加alt属性(对图片的描述)
03：标题-段落-字符实体-换行

html注释

html文档代码中可以插入注释，注释是对代码的说明和解释，注释的内容不会显示在页面上，html代码中插入注释的方法是：

<!-- 这是一段单行注释 -->

<!-- 
这是一段
多行注释 
-->

html基本结构

一个html的基本结构如下：

<!DOCTYPE html>
<html lang="en">
    <head>            
        <meta charset="UTF-8">
        <title>网页标题</title>
    </head>
    <body>
          网页显示内容
    </body>
</html>

写html必须先声明<!DOCTYPE html>，如果不声明的话，会默认以最低版本的文档模式进行渲染，从而导致很多地方不兼容；
以<html>开头，</html>结尾；

HTML标签分类

html标题标签

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

标题标签示例：

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

html段落标签

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

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>段落</title>
</head>
<body>
    <h2>ip和端口</h2>
    <p>IP地址是什么：比如192.168.1.1 这样的一些数字；
    ip地址的作用：用来在电脑中 标识唯一一台电脑，比如192.168.1.1；在本地局域网是唯一的。
    </p>

    <p>知名端口：
    固定分配给特定进程的端口号，其他进程一般无法使用这个端口号；
    小于1024的，大部分都是知名端口；
    范围从0~1023；</p>
</body>
</html>

html换行标签

代码中成段的文字，直接在代码中回车换行，在渲染成网页时候不认这种换行，如果真想换行，可以在代码的段落中插入<br />来强制换行。

换行示例：

<p>IP地址是什么：比如192.168.1.1 这样的一些数字；<!-- 这里的手动换行其实无效 -->
ip地址的作用：用来在电脑中 标识唯一一台电脑，比如192.168.1.1；在本地局域网是唯一的。
</p>

<p>IP地址是什么：比如192.168.1.1 这样的一些数字；<br />ip地址的作用：用来在电脑中 标识唯一一台电脑，比如192.168.1.1；在本地局域网是唯一的。
</p>

html字符实体

代码中成段的文字，如果文字间想空多个空格，在代码中空多个空格，在渲染成网页时只会显示一个空格，如果想显示多个空格，可以使用空格的字符实体；
在网页上显示 “<” 和 “>” 会误认为是标签，想在网页上显示“<”和“>”可以使用它们的字符实体：
空格的字符实体： 
“<” 和 “>” 的字符实体为 < 和 >

注意：一两个空格之类的少量空格我们可以使用  来进行空格，但大量的空格，我们需要使用后面学的样式来进行调整；

html标签特点

html的标签大部分是成对出现的,少量是单个出现的，特定标签之间可以相互嵌套，嵌套就是指一个标签里面可以包含一个或多个其他的标签，包含的标签和父标签可以是同类型的，也可以是不同类型的：

<!-- 成对出现的标签  -->
<body>......</body>
<p>......</p>
<div>......</div>
<b>......</b>

<!-- 单个出现的标签  -->
<br />
<img src="..." />
<input type="..." />

<!-- 标签之间的嵌套  -->
<p>
    <span>...</span>
    <a href="...">...</a>
</p>
<div>
      <h3>...</h3>
      <div>
              <span>...</span>
              <p>...</p>
      </div>
</div>

语义标签

html块标签

div标签--块元素，表示一块内容，没有具体的语义。
span标签--行内元素，表示一行中的一小段内容，没有具体的语义。

div标签内部可以嵌套其他标签，比如嵌套标题标签，p标签，以及div标签等等；
其他有的标签页可以嵌套，但一般嵌套用div比较多；
p标签内部不建议(不能)嵌套p标签，但能嵌套span标签，目前即使嵌套了span标签页没什么变化，学到样式时就可以给span包裹的文字添加样式了。
一个div标签和一个p标签，里面放一样的内容，显示出来并没有区别；但如果将三个div标签和三个p标签分别放在一起，就会发现，三个p标签每段文字都会空一行，而div的每段会挨在一起，这是因为div标签本身不带样式，而p标签带样式；

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>段落</title>
    </head>
    <body>
        <h2>ip和端口</h2>
        <p>IP地址是什么：比如192.168.1.1 这样的一些数字；
        ip地址的作用：用来在电脑中 标识唯一一台电脑，比如192.168.1.1；在本地局域网是唯一的。
        </p>
        <!-- 两段之间会有空行 -->
        <p>知名端口：
        固定分配给特定进程的端口号，其他进程一般无法使用这个端口号；
        小于1024的，大部分都是知名端口；
        范围从0~1023；</p>

        <div>IP地址是什么：比如192.168.1.1 这样的一些数字；
        ip地址的作用：用来在电脑中 标识唯一一台电脑，比如192.168.1.1；在本地局域网是唯一的。
        </div>
        <!-- 两段之间没有空行 -->
        <div>知名端口：
        固定分配给特定进程的端口号，其他进程一般无法使用这个端口号；
        小于1024的，大部分都是知名端口；
        范围从0~1023；</div>
    </body>
    </html>

含样式和语义的标签

em标签 行内元素，表示语气中的强调词 斜体；
i标签 行内元素，原本没有语义，w3c强加了语义，表示专业词汇 斜体；
b标签 行内元素，原本没有语义，w3c强加了语义，表示文档中的关键字或者产品名 加粗；
strong标签 行内元素，表示非常重要的内容 加粗。

实际开发中其实随便用，可能面试的时候会问它们之间的区别；
使用时直接将标签包裹住文字即可，注意是双标签；

仅举例i标签：

<p>知名端口：
固定分配给特定<i>进程</i>的端口号，其他进程一般无法使用这个端口号；
小于1024的，大部分都是知名端口；范围从0~1023；
</p>

语义化的标签

语义化的标签，就是在布局的时候多使用语义化的标签，搜索引擎在爬网的时候能认识这些标签，理解文档的结构，方便网站的收录，语义化的标签不多。
比如：

h1标签是表示标题，
p标签是表示段落，
ul、li标签是表示列表，
a标签表示链接，
dl、dt、dd表示定义列表等。

html图像标签

html图像

<img>标签可以在网页上插入一张图片，它是独立使用的标签；
通过“src”属性定义图片的地址；
通过“alt”属性定义图片加载失败时显示的文字，以及对搜索引擎和盲人读屏软件的支持。

绝对路径和相对路径

像网页上插入图片这种外部文件，需要定义文件的引用地址，引用外部文件还包括引用外部样式表，javascript等等，引用地址分为绝对地址和相对地址。
绝对地址：相对于磁盘的位置去定位文件的地址
相对地址：相对于引用文件本身去定位被引用的文件地址
绝对地址在整体文件迁移时会因为磁盘和顶层目录的改变而找不到文件，相对路径就没有这个问题，所以在开发时建议使用相对路径。

相对路径的定义技巧：

“ ./ ” 表示当前文件所在目录下，比如：“./pic.jpg” 表示当前目录下的pic.jpg的图片，这个使用时可以省略。
“ ../ ” 表示当前文件所在目录下的上一级目录，比如：“../images/pic.jpg”，表示当前目录下的上一级目录下的images文件夹中的pic.jpg的图片。

html链接标签

<a>标签可以在网页上定义一个链接地址;
通过href属性定义跳转的地址，
通过title属性定义鼠标悬停时弹出的提示文字框。
通过target属性定义链接打开时窗口的位置；target="_self"覆盖原有网页，在原来的位置打开；target="_blank"新开一个标签打开网页。

a标签示例：

<a href="#"></a> <!--  缺省参数，暂时不知道跳转哪里，默认表示链接到页面顶部   -->
<a href="http://www.baidu.com/" title="跳转百度网首页">百度一下，你就知道</a>
<a href="http://www.baidu.com/" title="跳转百度网首页">
    <img src="images/baidu_logo.png" alt="百度logo图片">
</a>
<a href="2.html">测试页面2</a>

定义页面内滚动跳转(设置锚点)
页面内定义了“id”或者“name”的元素，可以通过a标签链接到它的页面滚动位置，前提是页面要足够高，有滚动条，且元素不能在页面顶部，否则页面不会滚动。

设置锚点语法：

<a href="#mao1">标题一</a>
......
......
<h3 id="mao1">跳转到的标题</h3>

锚点示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面内跳转</title>
</head>
<body>
    <h1 id="biaoti01">标题一</h1>

    <a href="#biaoti01">标题一</a>
    <a href="#biaoti02">标题二</a>
    <a href="#biaoti03">标题三</a>
    <a href="#biaoti04">标题四</a>

    <p>这里是内容</p>
    <br />
    重复n次空行，实现多屏
    <br />
    <p>这里是内容</p>
</body>
</html>

列表标签

html中，列表分为：有序列表，无序列表，定义列表；
实际开发中一般用无序列表，而很少用有序列表。

无序列表

<h2>无序列表</h2>
<!-- 快捷方式：(ul>li*3)*2 + tab键 -->
<ul>
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
</ul>

<ul type="disc/circle/square/none">
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
</ul>

在网页生成的列表上，每条项目上会有或圆或方的小图标；在以后的开发中，会将小图标去掉，自定义样式；
参数及作用：

参数	作用
disc	实心圆点，默认值
circle	空心圆圈
square	实心方块
none	无样式

也可以在列表中添加a链接

<!-- ul>(li>a{新闻标题})*3 -->
<ul>
    <li><a href="">新闻标题</a></li>
    <li><a href="">新闻标题</a></li>
    <li><a href="">新闻标题</a></li>
</ul>

有序列表

<h2>有序列表</h2>
<ol>
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
</ol>
<!-- 快捷方式：ol>li*3 + tab键 -->
<ol type="1/A/a/I/i" start="2">
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
</ol>

在网页生成的列表上，每条项目上会按1,2,3编号；

参数及作用：

|1|数字列表，默认值|

|---|---|
|A|大写字母|
|a|小写字母|
|I|大写罗马|
|i|小写罗马|
|start|初始值|

定义列表

<!-- 快捷方式：dl>(dt+dd)*2 + tab键 -->
<dl>
    <dt>标题1</dt>
    <dd>内容1</dd>
    
    <dt>标题2</dt>
    <dd>内容1</dd>
    <dd>内容2</dd>
</dl>

显示效果为：

标题1
　　内容1
标题2
　　内容1
　　内容2

HTML表格

<table><!-- 表示一个表格 -->

<tr> <!-- 表示一行 -->
    <th>序号</th> <!-- 表示第一行有三个格子，并且th一般是首行 -->
    <th>产品名称</th>
    <th>产品价格</th>
</tr>

<tr> <!-- 表示一行 -->
    <td>01</td> <!-- 表示第二行有三个格子 -->
    <td>苹果</td>
    <td>¥5.00</td>
</tr>
</table>

可以在<table border="1"></table> 用来显示边框

一般是依靠字体自己撑开边框的，如果想要自定义宽和高，可以：<table border="1" width="300" height="500"></table>

th默认居中对齐，加粗
td默认左对齐，不加粗

如果想要td/th 水平方向居中，可以<td align="center/left/right"></td>
如果想要th/td 垂直方向靠上，可以<th valign="top/middle/bottom"></th>
如果想要一行的五个格子合并：<td colspan="5"></td>，并删除其他四个td
如果想要合并一列的五个格子：<td rowspan="5"></td>，并删除其他四个tr里面的td

table常用标签

table标签：声明一个表格
tr标签：定义表格中的一行
td和th标签：定义一行中的一个单元格，td代表普通单元格，th表示表头单元格

table常用属性

border 定义表格的边框
cellpadding 定义单元格内内容与边框的距离
cellspacing 定义单元格与单元格之间的距离
align 设置单元格中内容的水平对齐方式,设置值有：left | center | right
valign 设置单元格中内容的垂直对齐方式 top | middle | bottom
colspan 设置单元格水平合并
rowspan 设置单元格垂直合并

用表格实现简历

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格合并</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2>表格合并</h2>
<!-- table>(tr>td*5)*6 -->
<table border="1" width="600" 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/huge.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>

表格合并实现简单个人简历

传统布局

传统布局(table布局)：

传统的布局方式就是使用table来做整体页面的布局，布局的技巧归纳为如下几点：

定义表格宽高，将border、cellpadding、cellspacing全部设置为0
单元格里面嵌套表格
单元格中的元素和嵌套的表格用align和valign设置对齐方式
通过属性或者css样式设置单元格中元素的样式

传统布局目前应用：

快速制作用于演示的html页面
商业推广EDM制作(广告邮件)

个人简历table布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人简历</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body topmargin="0">  <!-- 让表格置顶 -->

<table width="800" height="800" border="0" align="center" cellpadding="0" cellspacing="0">

    <tr>
        <!-- 照片列开始 最左边的一列，用来放置头像和姓名，联系方式的 -->
        <td width="260" valign="top" bgcolor="#f2f2f2">
            <!-- table>(tr>td)*4 +tab键 -->
            <table width="200" border="0" cellpadding="0" cellspacing="0" align="center">
                <!-- 通过减少表格宽度，并居中，做到让左右各空30px -->
                <!-- 通过将表格父级的td标签置顶，表格内新增一个td来使照片与上方隔开 -->
                <tr>
                    <td height="100"></td>
                </tr>
                <tr>
                    <td align="right"><img src="../images/huge.jpg" alt=""></td>
                </tr>
                <tr>
                    <td align="right">胡歌</td>
                </tr>
                <tr>
                    <td align="right">131xxxxxxxx</td>
                </tr>
                <tr>
                    <td align="right">huge@163.com</td>
                </tr>
            </table>


        </td>
        <!-- 照片列结束 -->

        <td width="30"></td>

        <!-- 简历详情列开始 -->
        <td width="480" valign="top">
            <table width="480" border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <td height="80"></td>
                </tr>
                <tr>
                    <td align="right"><img src="../images/resume.png" alt=""></td>
                </tr>
            </table>
            <hr/>
            <br/>

            <!-- 个人基本信息开始 -->
            <table width="480" height="200" border="0" cellspacing="0" cellpadding="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>185cm</td>
                </tr>
                <tr>
                    <td><b>民 族：</b>汉</td>
                    <td><b>体 重：</b>70kg</td>
                </tr>
                <tr>
                    <td><b>出生日期：</b>1985.1.1</td>
                    <td><b></b>电 话：131xxxxxxxx</td>
                </tr>
                <tr>
                    <td><b>专 业：</b>演员专业</td>
                    <td><b>现居住地：</b>三里屯</td>
                </tr>
            </table>
            <!--个人基本信息结束-->
            <br>
            <br>

            <table width="480" height="90" border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <td><b>教育背景及工作经历</b></td>
                </tr>
                <tr>
                    <td><b>2013-2017 </b>北京戏剧学院 演员专业</td>
                </tr>
                <tr>
                    <td><b>2017-2019 </b>横店华谊公司 专业演员</td>
                </tr>
            </table>
            <br>
            <br>

            <table width="480" height="90" border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <td><b>获奖经历</b></td>
                </tr>
                <tr>
                    <td><b>2016： </b>华谊优秀演员奖</td>
                </tr>
                <tr>
                    <td><b>2018： </b>华谊终身成就奖</td>
                </tr>
            </table>
        </td>
        <!-- 简历详情列结束 -->
        <td width="30"></td>
    </tr>
</table>
</body>
</html>

table布局实现详细个人简历

HTML表单

html表单
表单用于搜集不同类型的用户输入，表单由不同类型的标签组成；

实现一个特定功能的表单区域（比如：注册），首先应该用<form>标签来定义表单区域整体，在此标签中再使用不同的表单控件来实现不同类型的信息输入。

label的for属性

原来激活用户名输入框，必须要点击输入框才行；使用for属性，可以通过用户名来激活输入框；提高用户体验；
for属性示例

<p>
    <label for="username">姓名：</label>
    <input type="text" name="username" id="username" />
</p>

<p>
    <label>性别：</label>
    <input type="radio" name="gender" value="0" id="man" /> <label for="man">男</label>
    <input type="radio" name="gender" value="1" id="women" /> <label for="women">女</label>
</p>

HTML内嵌框架

内嵌框架的使用

<iframe>标签会创建包含另外一个html文件的内联框架（即行内框架）；
src属性来定义另一个html文件的引用地址；
frameborder属性定义边框；
scrolling属性定义是否有滚动条；

代码如下：

<iframe src="http://www..." frameborder="0" scrolling="no"></iframe>

内嵌框架与a标签配合使用

a标签的target属性可以将链接到的页面直接显示在当前页面的iframe中，代码如下：

<a href="01.html" target="myframe">页面一</a>
<a href="02.html" target="myframe">页面二</a>
<a href="03.html" target="myframe">页面三</a>
<iframe src="01.html" frameborder="0" scrolling="no" name="myframe"></iframe>