这篇博客介绍了HTML的基本概念，包括HTML的起源、标准格式，详细讲解了HTML常用标签如标题、段落、超链接、图片、音频的使用方法，还涉及了HTML元素的语法和属性，以及HTML向XHTML转换的步骤。此外，文章还提到了网页设计的颜色规范和常用软件。
HTML
一、HTML的简介
1994年10月，蒂姆.伯纳斯.李创立了万维网联盟，加盟成员有美国麻省理工、欧洲数学与信息研究联盟、日本庆应大学、中国北京航空航天大学。
HTML 是超文本标记语言hyper text transfer protocol(超文本传输协议)。标准通用标记语言下的一个应用“超文本”，就是指页面内可包含图片、链接、音乐、程序等非文字元素
超文本标记语言是万维网编程的基础，也就是说万维网（www(World Wide Web)–万维网）是建立在超文本基础之上的
W3C最重要的工作是发展Web规范，这些规范描述了Web的通信协议（比如HTML）和其他的构建模块
web前端就是利用html+css+javascript等前端技术将UI设计师的效果图生成PC端的，移动端的网页
二、HTML标准格式
<!DOCTYPE html> //为HTML5文档
<html>
<head>
<meta charset = "UIF-8"> //网页编码格式为utf-8
<title></title>
</head>
<body> //body元素定义文档主体。body元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等）
</body>
</html>
"utf-8"是一种字符编码。charset = "utf-8"是告知浏览器此页面属于什么字符编码格式，下一步浏览器做好"翻译"工作。常见的字符编码有：gb2312, utf-8。
gb2312:代表国家标准第2312条，其中是不包含繁体的（虽然内地不怎么使用繁体，但是台湾省还在使用繁体）
1）头部标签<head></head>
在head标签元素中可以插入脚本（scripts），样式文件（CSS），及各种meta信息。
可以添加在头部区域的元素标签为:<title>,<style>,<meta>,<link>,<script>,<noscript>和<base>。
2）文档标题<title></title>
title标签定义了不同文档的标题
title标签在HTML文档中是必须的
title元素标签：
1）定义了浏览器工具栏的标题
2）当网页添加到收藏夹时，显示在收藏夹中的标题
3）显示在搜索引擎结果页面的标题
三、HTML常用标签
单标签：有一个标签组成，如<hr/>
双标签：由“开始标签”和“结束标签”两部分组成，必须成对使用，如<p></p>,<p>是开始标签，表示一个段落的开始，</p>是结束标签，表示一个段落的结束。
1、标题
<h1>这是一个标题</h1> //h1 --> h6: 字体大小逐个递减
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>
<h4>这是一个标题</h4>
<h5>这是一个标题</h5>
<h6>这是一个标题</h6>
快速打出多个可以用：ul>li*6+tab键
【注】：浏览器会自动在标题的前后添加空行
2、段落
浏览器会自动地在段落的前后添加空行。
<p>这是一个段落</p>
3、超链接
链接由标签定义的，链接的地址可在href属性中指定。
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像。点击这些内容来跳转到新的文案或者当前文档中的某个部分。
当鼠标指针移动到网页中的某个链接上时，箭头会变成一只小手。
<a href="网址">链接名称</a> //覆盖当前网页
<a href="网址" target =“_blank">链接名称</a> //另开网页
*target属性，可以定义被链接的文档在何处显示
链接将以下形式出现在浏览器中：
1）一个未访问过的链接显示未蓝色字体并带有下划线
2）访问过的链接显示为紫色并带有下划线
3）点击链接是，链接显示为红色并带有下划线
4、插入图片
图像是由<img>标签定义的。<img>是空标签（只包含属性，并且没有闭合标签）
在页面上显示图像，需要使用源属性（src）。源属性的值是图像的存储地址。
<img src="img/1.jpg" width="300px" />
方法一、先打代码img+回车，将图片拖入到img文件夹中，再在scr=“ ”中打入图片的路径，接着设置图片所需的大小
方法二、先将图片拖入到img文件夹中，再在代码中打img，输入图片路径，接着设置图片所需的大小。
如果需要改变图片的大小，可以在src=“ ”后打上width=“ ”，height=“ ”。
5、插入音频
<audio src="img" controls="controls" autoplay="autoplay">
将音频文件放到img文件中
src="img"中插入的是音频位置链接；
controls = "controls"是在页面中出现音频播放器的按钮；
autoplay="autoplay"是指在打开网页的时候音频自动播放。
6、空元素（换行）
没有内容的HTML元素被称为空元素。空元素是在开始标签中关闭的。
在不产生一个新段落的情况下进行换行（新行）
<br/>就是没有关闭标签的空元素 //定义换行
7、水平线
<hr/> //标签在HTML页面中创建水平线
<p>这是一个段落</p>
<hr/>
<p>这是一个段落</p>
<hr/>
8、注释（ctrl+？）
将注释插入到HTML代码中，可以提高其可读性，是代码更容易被人理解。浏览器会忽略注释，不会显示。
<!--这是一个注释-->
9、文本格式化
<b></b> //粗体(bold)
<i></i> //斜体 (italic)
10、表单标签
表单只要是由客户端向服务器传递数据，常见的注册、登录、调查问卷、留言簿等；
表单标签语法：<form>表单中的内容</form>
表单名称name：表单的名称，用来区分表单与表单
提交表单action：表单内容要发送的地址
传递方式method：表单内容通过何种方式发送（2种）
区别：
get：发送内容信息量小传递速度快 不安全
post：发送内容信息量大 传递速度慢 安全
input:代表输入框；type：代表输入框类型；text：文本；password：密码；placeholder：提示文字；reset：重置
radio：单选按钮（圆形），且name要保持一致
checkbox：多选按钮（方形）
<!-- 表单框 -->
<form action = "tijiaodizhi" method = "post"><br/>
<!-- 文本框 -->
<input type = "text" placeholder = "请输入用户名"/><br/>
<!-- 密码框 -->
<input type = "password" placeholder = "请输入密码"/><br/>
<!-- 单选框 -->
<input type="radio"name="xiaodong"/ >小花
<input type="radio"name="xiaodong" />小红
<input type="radio"name="xiaodong" />小雪
<input type="radio"name="xiaodong" />小美<br/>
<!-- 复选框 -->
<input type="checkbox" name="a"/>小王
<input type="checkbox" name="a"/>小伟
<input type="checkbox" name="a"/>小杰
<input type="checkbox" name="a"/>小胖<br/>
<!-- 文件上传 -->
<input type="file" /><br>
<!-- 重置按钮 -->
<input type="reset" value="重新写"/><br/>
<!-- 提交按钮 -->
<input type="submit" value="请提交" /><br/>
</form>
效果图如下：
11、表格标签
表格标签由<table>标签来定义的。
“行”用<tr>标签定义。
每行被分隔为若干个单元格，其中单元格用<td>标签来定义。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
表格的标头则用<th>标签进行定义。
效果图如下：
上面是带边框属性的，如果不想显示边框，就可以不定义border，同理，改变边框像素点就只需要改变border后的数字
效果图如下：
含有表头的：
效果图如下：
12、列表标签
列表标签有 <ul>;<ol>; <li>; <dl>>; <dt>; <dd>; <dir>（已废弃，使用<ul>代替）；<menu>（已废弃，使用<ul>代替）。
1）无序列表：是一个项目列表，此列表项目中有三种标记图案，分别是circle（空心圆形） 、disc （实心圆形）、square（空心方形）
<ul type="circle">
<li>连接电源</li>
<li>按下按钮开关</li>
<li>打开电视</li>
</ul>
效果图如下：
<ul type="disc">
<li>连接电源</li>
<li>按下按钮开关</li>
<li>打开电视</li>
</ul>
<ul type="square">
<li>连接电源</li>
<li>按下按钮开关</li>
<li>打开电视</li>
</ul>
2）有序列表：也是一个列表项目。
有序列表始于<ol>标签，每个列表项始于<li>标签。该列表项目使用数字等进行标记。
<ol type="1">
<li>连接电源</li>
<li>按下按钮开关</li>
<li>打开电视</li>
</ol>
效果图如下：
<ol type="A">
<li>连接电源</li>
<li>按下按钮开关</li>
<li>打开电视</li>
</ol>
效果如如下：
3）自定义列表：该列表是项目及其注释的组合
列表以<dl>标签开始。每个自定义列表项以<dt>开始，每个自定义列表项的定义以<dd>开始。
<dl>
<dt>香橙</dt>
<dd>五月开花，花白而香</dd>
</dl>
效果图如下：
四、HTML元素
1）元素语法
（1）HTML以开始标签起始，以结束标签终止
（2）元素的内容使开始标签与结束标签之间的内容
（3）某些HTML元素具有空内容
（4）空元素在开始标签中进行关闭（以开始标签的结束而结束）
（5）大多数HTML元素可拥有属性
2）、属性
（1）HTML元素可以设置属性
（2）属性可以在元素中添加附加信息
（3）属性一般描述于开始标签
（4）属性总是以名称/值对的形式出现，例如：name=“value”
五、拓展
1）、如何将HTML转换为XHTML
（1）、添加一个XHTML <!DOCTYPE>到你的网页中
（2）、添加xmlns属性添加到每个页面的html元素中
（3）、改变所有的元素为小写
（4）、关闭所有的空元素
（5）、修改所有的属性名称为小写
（6）、所有属性值添加引号
2）、网页注意事项：
（1）、字
《1、字不过三：一个网站页面，字体最好不要超过3种
《2、常用字体：宋体 思源黑体（注意：有的字体需要版权，使用的时候需要慎重）
《3、字号规范：12px以上（偶数）
《4、行间距：字号1.5-2倍，作为参考
（2）、网页常用的文字颜色：
#333333 重要文字-标题
#666666 次要文字-正文
#999999 说明文字
网页文字以黑白灰为主，不要出现大批量彩色文字
（3）、颜色规范：
《1、颜不过三：网页设计中，出黑白灰外，一般颜色要控制在三种之内。
《2、主色调：网页中彩色占百分比最大为主调色。
《3、辅助色：画面只有一种色彩或许会单调，所以一般会给予画面一些其他颜色的点缀。为鼠标滑过或者其他点缀的颜色即为辅助色。
（4）、取色方法（确定主色）：
《1、对比色搭配
《2、同色搭配
《3、logo配色法
《4、采物法
《5、饱和度配色
《6、像素画配色法（像素画取色-例如：马卡龙色）
3）常用软件：
《1、PS(photoshop):界面设计
《2、Illustrator:矢量图标
《3、Axure RP8.0:交互原型图
《4、像素大厨:页面标注
《5、Hbuilder X:代码（div+css）
扫一扫
287
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
