HTML+CSS前端学习
HTML
相关示例及代码：
http://www.runoob.com/html/html-tutorial.html / http://www.runoob.com/html/html5-intro.html
http://www.runoob.com/css/css-tutorial.html / http://www.runoob.com/css3/css3-tutorial.html
1、什么是HTML
是用来描述网页的一种语言 ! (超文本标记语言)
HTML使用的是标签来描述网页
1.1 HTMLCSS JavaScript的关系
HTML 名词
CSS 形容词
JS 动词
1.2 HTML标签是什么
与XML中标签基本一致 ,由w3c组织定义的一系列的标签名称 ! XHTML1.0
1.3格式
文档声明: <!doctypehtml>
根节点: <html> </html>
网页头部： <head> 网页标题 ：<title>我们的第一个网页</title> </head>
网页主体部分<body> 哈哈哈哈哈哈哈哈, 第一个网页 </body>
1.4 HTML存储的文件格式
文件后缀可以是: .html 或者 .htm
2、网页的两部分介绍
1. 头部信息: head
用来描述网页:
- title 设置标题
- meta 用来描述网页的编码, 内容
- style 用来定义样式
- script 脚本
2. 网页主体: body
属于网页的内容部分, 我们一般会在这里添加很多其他的元素, 来丰富我们的网页 .
2.1HTML元素与属性:
HTML元素是允许嵌套不允许交叉的!
body元素 bgcolor background text
常用属性:
1. bgcolor : 用于指定网页主体的背景颜色 取值分为两种 1. 采用#RRGGBB调色 2. 颜色单词,例如red
2. background: 用于指定HTML主体的背景图片 取值: 可以是一个网络图片, 也可以是本地相对路径的图片
3. text : 用于指定网页中主体的文本颜色 取值分为两种 1. 采用#RRGGBB调色 2. 颜色单词,例如red
标题h1-->h6
文本标题标签:
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
在设计的角度上, 一般单个网页中, 不建议出现一次以上一级标题 !
3、标签
文字格式化标签 (html5时, 不再推荐使用)
用来修饰文字的一系列标签:
加粗:<b>这里文本是加粗的</b>
倾斜:<i>这里文本是斜体的</i>
删除线:<del>这里的文本是带有删除线的</del>
下划线:<u>这里的文本是带有下划线的</u>
格式符号标签 br hr p  
<br>: 换行
<hr>: 分割线
<p> : <p>文字段落标签</p>
: 表示空格
超级链接标签a
超级链接标记 , 指向一个网址, 当点击这个超级链接时 , 浏览器会发生跳转 !
格式 : <a href="地址" title="弹出文本提示">提示文本</a>
- 跳转到普通网页:
<ahref="https://www.baidu.com" title="点击跳转到百度">点击去百度</a>
- 打开邮件发送
<a href="mailto:邮箱地址" title="点击给我发邮件">发送邮件</a>
例如:
<a href="mailto:dage@itdage.cn"title="点击给我发邮件">发送邮件</a>
- 使用新窗口打开网页
添加target属性=_blank 即可
例如:
<ahref="https://www.baidu.com" target="_blank" title="点击跳转到百度">点击去百度</a>
超链接锚点 a name
通过a标签, 给网页添加锚点, 然后在跳转至此网页时 , 可以直接跳到锚点位置 !
步骤
1. 在被跳转的位置 , 加入a元素 , 并给a元素添加name属性(创建锚点, 并起名称)
2. 在跳转位置的超链接中编写href="页面名称#锚点名称";
如果是在当前页面编写锚点的跳转,href="#锚点名称"
元素的分类:
块元素 : 单独占据一行 , 可以控制自身的宽高 比如: p元素, div元素
行内元素 : 在一行内, 从左至右顺序排列 ,无法调整自身宽高 , 它们的宽高, 由自己的内容决定 , 比如: b元素,i元素,del元素,a元素,span元素等等
行内块元素 , 在一行内, 从左至右顺序排列, 可以调整自身宽高 !
图片标签img:
属性:
- src : 一个url , 图片的地址(网络地址,本地绝对地址,本地相对地址)
- alt : 当图片出现问题, 无法加载时, 用来替换的错误提示文本
- width: 指定图片的宽度
- height: 指定图片的高度
我们一般不建议, 同时指定宽度与高度 ! 图片会呈现一个拉伸的效果
我们建议只指定宽度, 因为在宽度调整时, 高度会自动缩放 / 我们建议只指定高度, 因为在高度调整时, 宽度会自动缩放
长度单位： px像素
音频播放audio
注意: 如果一个音频播放 , 没有指定控制器的话, 是不存在任何视图的 !
属性:
- src : 一个url , 音频的地址(网络地址,本地相对地址)
- autoplay: 是否自动播放 , 这是一个html5的boolean属性 ,这个属性只要出现, 则表示true
- controls: boolean类型属性, 是否添加控制器 , 这个属性只要出现, 则表示true
外地兄弟: http://home.itdage.cn:8090/mp3/sf.mp3
本地兄弟: http://192.168.13.224/mp3/sf.mp3
音频播放video
注意: 如果一个音频播放 , 没有指定控制器的话, 是不存在任何视图的 !
属性:
- src : 一个url , 视频的地址(网络地址,本地相对地址)
- autoplay: 是否自动播放 , 这是一个html5的boolean属性 ,这个属性只要出现, 则表示true
- controls: boolean类型属性, 是否添加控制器 , 这个属性只要出现, 则表示true
- width: 宽度px
- height: 高度px
列表标签ol li ul
- 有序列表ol
列表中使用li标签来表示一列 !
属性:
- start=数字 , 表示有序列表编号的起始值
- type: 编号的文字类型: 1(数字)/a(小写字母)/A(大写字母)/i(小写罗马数字)/I(大写罗马数字)
- 无序列表ul
列表中使用li标签来表示一列 !
属性:
- type: 无序列表图标的类型 disc /square / circle
表格table tr td th
组成表格必须的标签:
1. 表格本身 table标签
2. 表格中的行元素 tr标签
3. 表格中的列元素 td标签
4. 表格中的列元素 th表头
5. 表格主体(正文)<tbody> <thead头部><tbody身体><tfoot脚>
可以忽略的标签: th : 表示表头
table与tr与td的关系 :
table是表格, 包含多行记录 , 每一行又包含很多列数据
一个table可以有多个tr子元素, 一个tr可以存在多个td子元素
属性:
- width: 指定table宽度 , 也可以指定td宽度
- height: 指定table或td的高度,
- border: 边框的大小, 指定数字
- bordercolor: 指定表格边框的颜色
- bgcolor: 指定table的背景颜色或者 td的背景颜色
- background: 指定table的背景图片或者 td的背景图片
- align: （左右居中）"center"居中HTML5 不支持 <table> align 属性。请用CSS 代替。
合并单元格:
在td上 , 指定单个单元格跨越的横向宽度:colspan=数字
在td上 , 指定单个单元格跨越的垂直宽度: rowspan=数字
<tablewidth="1000px" height="300px" border="1"bordercolor="red" gcolor="#f2f2f2">
<tr>
<tdwidth="100px" rowspan="4">垂直占用四个单元格</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr> <td>2</td>
<td>3</td>
<tdbgcolor="#33ff33">4</td>
</tr>
<tr> <td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr> <td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
强调区别href url src alt:
标签之间是可以进行嵌套的
例如: 超链接 <ahref="超链接地址">超链接文本</a>
图片:<img src="图片地址">
通过嵌套, 可以完成图片超链接
<ahref="https://www.baidu.com" title="去百度"><imgsrc="images/xiyangyang.jpg"></a>
div{
url(统一资源定位器)，在前端中，只出现在CSS中，一般用来设置背景或图片;
background-image:url(“”);
list-style-image:url(“”);
}
src暂时只在HTML中的音频视频图片（多媒体）中出现
<imgsrc="图片路径名称"alt="多媒体文件无法正常显示时，显示的文字">
相对地址的使用
绝对地址: d://....
相对地址:
基于当前文件所在文件夹的相对路径
4、表单标签form(action、enctype、method=post/get)
作用: 表单用于显示和收集信息 , 并将信息通过http请求传递给服务器
----------------------------
常见的表单的用途:
1. 注册
2. 登录
表单常用的属性:
- action : 表单提交的地址(URL)
- enctype: 表单提交时的编码格式 , 我们一般不指定, 采用网页默认编码(meta)
- method : 表单提交的方式(GET /POST) 默认GET
相同的请求key 是允许存在的!
GET请求:
特点: 表单中的键值对通过在网址中拼接传递
拼接的方式:
网址与参数通过?拼接 ,
参数的key与value通过=连接
多个参数之间使用&连接
POST请求:
特点: 请求时, 参数通过请求体传递 !
可以进行文件的提交 !
4.1表单常用的子节点: name value type
input标签
常用数据:
name属性: 提交数据时, 当前输入框内容的key
value属性:
- 输入框: 输入的内容, 也是提交的内容
- 按钮: 按钮显示的文本
- 单选框/复选框 : 提交的内容
type属性: 表示输入组件(input)的类型:
- text: 默认 , 单行文本输入框
- password: 单行密码输入框, 内容会被*代替
- checkbox: 多选按钮
- radio : 单选按钮
在进行单选按钮编写时, 可以通过相同的name ,来完成单选的分组
- hidden : 隐藏的输入框
- submit : 提交按钮
- button : 普通按钮
- reset : 重置按钮
html5时添加的一个比较重要的属性:
- placeholder: 提示的文本
--------------------------------------------
单选框与复选框如何设置默认选中项 check
添加属性: checked=checked即可
不可输入的文本输入框 disabled
添加属性 disabled , html5 boolean属性
图片提交按钮
input标签type为image : 图片提交按钮与submit基本一致。但是多携带了两个参数:
x: 鼠标点击的image按钮的横向像素坐标位置
y: 鼠标点击的image按钮的像素垂直坐标位置
文件提交
input标签type为file: 文件上传需要指定form表单的提交方式为post还需要与后台程序员协商提交的协议 !
4.2 select标签与option标签
select是下拉选框的组, option是下拉选框的选项下拉选框标签 , 在form表单中进行数据的收集!
select常用属性:
- size: 下拉选框中一次展示的数据个数
- multiple: 是否支持多选
- name: 数据提交时的key
option常用属性:
- value: 选框的值
完成导航网页的编写:
百度搜索:
表单提交的地址:https://www.baidu.com/s
用户输入的内容的key :wd
360搜索:
表单提交的地址:https://www.so.com/s
用户输入的内容的key : q
搜狗搜索:
表单提交的地址:https://www.sogou.com/web
用户输入的内容的key :query
必应搜索:
表单提交的地址:http://cn.bing.com/search
用户输入的内容的key : q
frame框架
html5 仅保留了一个frame框架:iframe
作用: 将一个网页嵌入到另一个网页中
使用方式:
<iframesrc="引入的URL"height="高度"width="宽度"></iframe>
长度单位:
常用的长度单位:
- px像素
- 占父元素的百分比
- em: 字体的大小
不常用的长度单位:
pt: point点
pc: 派卡
in: 英寸
mm: 毫米
cm: 厘米
HTML5新功能的限制
IE10以下不支持
以下是以代码形式书写的笔记，本系列会持续更新，主要内容预计是类似下文的笔记，兼或一些思考与小项目，希望对你会有所帮助
1 <!-- -->
2 <!DOCTYPE html><!--声明文档类型,DOCTYPE不区分大小写，不区分引号-->
3 <meta charset="utf-8"><!--定义文档的字符编码-->
4 <title>title</title>
5 <!--忽略了body，但依然存在-->
6 <br/><!--换行 -->
7 <img src="file:///C:/Users/Song/Pictures/scut.jpg" ><!-- 打开本地图片-->
8 <br/>
9 <h1>标题</h1>
10 <p>第一段 h1～h6 不同级别的标题
11 <hr><!--水平线 -->
12 <br/>第二段 上面有一条水平线
13 <br/>第三段 Ctrl + F5 刷新页面
14 <br/>第四段 Ctrl + S 保存页面
15 <br/>只写属性，不写属性值，true；
16 不写属性，false；
17 属性值=属性名，true；
18 属性值=空字符串，true；
19 <br/>
20 <br/>br换行
21 <br/>当属性值不包括空字符串，<，>，=，单引号，双引号等字符时，属性值两边的引号可以省略
22 <br/>
23 <a href="http://justsong.xyz/archives/">这是一个导向我的简陋个人网站的超链接，注意是href</a>
24 <br/>