HTML-----张艾玲日记1
张艾玲
qq:2529069088
第一章
一.web基础知识
如何自学web开发？（从基础go!）
1、web与Internet
2.htmlbasic
3.CSSBasic
4.JavascriptBasic
5.Javascript+DOM+jQqery
6.Javascript CORE
7.DOM
8.jQuery
9.服务器，HTML5，Ajax，Bootstrap
10.AngularJS，微信，ReactJS
个人理解 第一章：HTML基础1
一：web与Internet？
internet是一个全球性的计算机互联网络，中文名称有：“国际互联网” “因特网” “交互网络”
二：internet提供的主要服务
telnet、email、www. bbs、ftb
三、web与internet的关系？
web是运行在liternet之上的最流行的应用之一，Internet为web提供了网络环境，web的出现推动了Internet的发展；
2.HTML的基础知识？
一、什么是HTML?
HTML是超文本语言。
html的结构？
用自己的话理解的话，我把html的结构想象成一个人，一个人是由头部、身体、脚，但这样的表达可能也不怎么正确吧。
结构开始是文档类型声明：<！doctype html>、 <html>、<head>、<body>、里面包含的标签我就不一一写了，大概知道结构就可以了。
像head里面可以写入<title>、<meta charest="utf-8">这些比较简单的标签就不写了。
二、html
属性和值
1、什么是属性
属性是用来修饰元素的
2、语法
属性的声明必须位于开始标记里
<标记 属性="值"></标记>
3、标准属性
1、id
元素在页面中的唯一标示
2、title
鼠标移入到元素时，所提示的文本
3、class
css中，引入类选择器
4、style
css中，定义元素的行内样式
5、注释
在页面中编写完成，但不会被浏览器解释运行的内容
可以将代码的解释说明写在网页中以便被其他程序员查看
<!--该处内容，无论多少，都是注释-->
注意：
1、注释不能嵌套注释
2、注释不能写在标记中
6、HTML和XHTML和HTML5
W3C负责定制和推广HTML
W3C：World Wide Web Consortium
万维网联盟
HTML5目标，是为了实现更简洁的HTML代码
三、文本(重点)
1、特殊字符
在网页中，任意多的空格和回车，最终只会被解析成一个空格
1、 一个空格
2、>>
3、<<
4、""
5、''
6、© ©
7、¥¥
2、文本标记
1、文本样式
<i></i> 斜体
<u></u> 下划线
<s></s> 删除线
<b></b> 加粗
<sup></sup> 上标
<sub></sub> 下标
2、标题元素
以标题的形式显示文本内容
语法:<h#></h#> #:1~6 加粗，独自成行
3、段落元素
以段落的形式显示文本
形式：文字大小采用默认大小，段落元素独自成行，而且距离其他元素会有垂直空白
语法：<p></p>
4、换行元素
语法：<br/>
5、分割线元素
语法：<hr/>
属性：
1、size 尺寸 取值以px(像素)为单位的数值 px可以省略
2、color 颜色
3、width 宽度 取值为px的数值，或者%作为单位
4、align 水平对齐方式
6、预格式化
保留源文件中的格式，既保留源文件中的换行和空格的效果
语法：<pre></pre>
7、分区元素
1、块分区元素
语法：<div></div>
形式：
1、独立成行
2、无任何文本显示效果
作用：
做布局
2、行内分区元素
语法：<span></span>
形式：
1、多个span会在一行内显示
2、无任何文本显示效果
作用：
处理同一行文字的不同格式
3、行内元素与块级元素
1、行内元素
多个元素会在一个行内显示
比如：span i b s u sup sub a img
作用：大部分行内元素是为了处理文本的显示效果
2、块级元素
每个块级元素会独占一行，即前后都有换行
比如：div h1~h6 p
作用：做布局
四、界面的使用技巧
2、meta的使用
1、<meta name="keywords" content="关键字1，关键字2，...">(关键字不超过10个)
2、<meta name="description" content="描述内容">
以上两块内容主要针对的是搜索引擎，而不是用户
3、工具软件的使用(Editplus操作)
1、指定创建网页模板
1、创建模板文件(**.html)
2、Tools->preferences->...
2、快速查看网页效果
快捷键：ctrl+B
3、代码折叠效果
view->code folding->user code folding
4、代码缩进线条
view->indent guide
5、代码行号显示
view->line number
6、取消bak文件
tools->preferences->file 取消create backup file when saving
7、修改文件编码默认为utf-8
tools->preferences->file 将default encoding设置为utf-8即可
五：表格{个人理解：HTML重点}
table表格
1.表格元素 tr行、 td列、th单元格标题、caption表格的标题、
2、使用表格
1、创建表格
1、定义表格：<table></table>
2、创建表行：<tr></tr>(table row)
3、创建列(单元格)：<td></td>(table data)
注意：
1、传统的表格，默认每行的列数都是统一化的
2、表格的属性
1、table的属性
1、width：设置表格宽度
2、height：设置表格高度
3、align：设置表格水平对齐
4、border：边框，指定边框宽度
5、bgcolor：设置表格背景颜色
6、cellspacing：设置单元格外边距(单元格之间的距离)
7、cellpadding：设置单元格内边距(单元格边框与内容之间的距离)
2、tr的属性
1、align：设置该行内容的水平对齐方式
2、valign：设置该行内容的垂直对齐方式
取值：top/middle/bottom
3、bgcolor：设置该行的背景颜色
3、td的属性
1、align：设置该单元格水平对齐方式
2、valign：设置该单元格垂直对齐方式
3、width：
4、height：
5、colspan：单元格跨列（左右合并）
6、rowspan：单元格跨行（上下合并）
3、表格的复杂使用
1、行分组
可以将表格分成3个部分：
1、表头：<thead></thead>
2、表主题：<tbody></tbody>
3、表尾：<tfoot></tfoot>
4、不规则表格
通过td的colspan(跨列)和rowspan(跨行)属性设置
1、跨列：从指定单元格位置处，横向向右合并几个单元格（包含自己）
注意：被合并掉的单元格，要删除
属性：colspan
取值：数字
2、跨行：从指定单元格位置处，纵向向下合并几个单元格（包含自己）
注意：被合并掉的单元格，要删除
属性：rowspan
取值：数字
3、表格的嵌套
必须在单元格中嵌套另一个表格
posted on 2017-03-18 17:48 zhangailing 阅读(387) 评论(0) 收藏 举报
浙公网安备 33010602011771号