前端“三件套“——HTML,CSS,Javascript（一）
目录
一. HTML:
一. HTML:
1.1 Web标准：
首先，我们为什么要有Web标准？对于不同的浏览器的渲染引擎不同，导致对于我们编写的相同代码在不同的浏览器显示效果不同，甚至出现排版问题。这时候我们使不同的浏览器按照相同的标准显示结果，让展示效果达到统一。这就是web标准。
Web标准的三个组成：
- HTML(结构）
- CSS（美化）
- JavaScript（行动）
HTML是超链接语言，用来显示页面的元素和内容。
CSS控制页面元素的外观（颜色，大小）以及位置等页面样式。
Javascript控制了网页的行为。
1.2 HTML简介：
HTML是一种超文本标记语言，主要用来实现静态页面，我们在页面看到的文本，图片，视频，声音，表格，链接等都是通过HTML语言描述的，而超文本中的超就是超越‘文本’，可以设置样式，显示图片，播放视频。HTML的是由标签组成，给不同的标签不同的属性，可以实现网页的多彩效果。
1.3 HTML标签：
1.3 HTML基本结构标签：
网页类似于一篇文章： 每一页文章内容是有固定的结构的，如：开头、正文、落款等 …… 网页中也是存在固定的结构的，如：整体、头部、标题、主体。网页中的固定结构是要通过特点的 HTML 标签 进行描述的
代码：
Document
1.3.1 HTML常用标签：
标签由 < 、 > 、 / 、英文单词或字母组成。并且把标签中 <> 包括起来的英文单词或字母称为 标签名常见标签由两部分组成，我们称之为：双标签 。前部分叫 开始标签 ，后部分叫 结束标签 ，两部分之间包裹内容。少数标签由一部分组成，我们称之为：单标签 。自成一体，无法包裹内容。标题标签：
h系列标签 h1：1级标题 h2：2级标题 h3：3级标题 h4：4级标题 h5：5级标题 h6：6级标题 特点： 1、标签的文字都有加粗 2、标签的文字都有变大，从h1~h6文字逐渐减小 3、每一个标题独占一行
注意点;
一般我们一个页面只需要一个h1标签，因为有些搜索的关键字就是我们的h1标签。
段落标签：
段落标签：p标签 双标签 特点： 1、段落之间存在间隙 2、每个段落是独占一行换行标签：
换行标签：br 单标签 作用：强制换行
水平线标签：
水平线标签：hr标签 单标签 作用：分割不同主题的水平线
文本格式化标签：
文本格式化标签：让文本有加粗、下划线、倾斜、删除线文本的格式效果 --> 加粗 下划线 倾斜删除线
加粗 下划线 倾斜删除线
图片标签
图片标签：img 单标签 作用：在网页中展示一张图片 属性： 1 、 src ：告诉浏览器要显示哪一张图片 属性值：路径（如果图片和当前页面在同级目录下，此时直接写图片的名字即可），在图片其他的目录里面，这个时候使用相对于文件的相对路径，而不是绝对路径 2 、 alt ：替换文本 当图片加载失败时（如：路径写错了），才显示的文字 3 、 title ：提示文本 当鼠标悬停在图片上时，才显示的文字 4 、 width ：图片的宽度 5 、 height ：图片的高度注意点： 1、如果只设置图片的宽度或者高度，此时另一个会自动等比例缩放 2、如果同时设置了两个，若设置不当此时图片可能会变形 3.相对路径 从 当前文件开始 出发找目标文件的过程，目标文件和当前文件有不同的相对路径所以我们的编写方式也不同
- 同级目录：直接写：目标文件名字！
- 下级目录：直接写：文件夹名/目标文件名字！
- 上级目录：直接下：../目标文件名字！
音频标签：audio 属性： 1、src：路径 2、controls：播放的控件 3、autoplay：自动播放（部分浏览器不支持） 4、loop：循环播放 视频标签：video 属性： 1、src：路径 2、controls：播放的控件 3、autoplay：自动播放（部分浏览器不支持）——》在谷歌浏览器中写muted可以完成静 音的自动播放 4、loop：循环播放代码：
链接标签：
超链接：a标签 双标签 作用：点击之后跳转网页 属性： 1、href：告诉浏览器点击之后跳转去哪一个网页 取值：路径 1、外部链接：互联网上的绝对路径 2、内部链接：推荐使用相对路径 2、target：目标网页的打开方式 取值： 1、_self：(默认值) 在当前窗口中进行跳转，原网页会被覆盖 2、_blank：在新窗口中进行跳转，原网页保留
除了以上这些标签我们还有布局标签，用于整个网页的布局：
div 标签：一行只显示一个（独占一行，块级元素） span 标签：一行可以显示多个列表：
无序列表有序列表
表格：
在网页中以行 + 列的单元格的方式整齐展示和数据，其他标签：
代码：
姓名
成绩 评语
注意：
有时候我们创建的表格很不好看会有两横，可以使用
border="1"
修饰
合并表格：
给保留的单元格设置：跨行合并（rowspan）或者跨列合并（colspan）
关于合并表格具体练习代码可以见—个人简历的制作
表单：
网页中显示收集用户信息的表单效果，如：登录页、注册页 标签名： input • input 标签可以通过 type 属性值的不同，展示不同效果 button 按钮标签： 网页中显示用户点击的按钮
input type属性值：
button type属性值：
注意：
1.表单中要提交的要写数据库的字段名，这样才能获取到数据库数据。
密码：
性别：
男
女
2.我们一般很少这样使用表单提交数据因为这样很不安全，用户数据容易获取。
select：
网页中提供多个选择项的下拉菜单表单控件 标签组成： select 标签：下拉菜单的整体 option 标签：下拉菜单的每一项 常见属性： selected ：下拉菜单的默认选中
textarea 文本域标签
提供可输入多行文本的表单控件 cols ：规定了文本域内可见宽度 rows ：规定了文本域内可见行数
表单练习——表单个人信息
http://t.csdn.cn/04TsU
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！
