为了进一步学习PHP,本周我选定了慕课网的PHP工程师学习计划,
从今天2015-07-06 10:24:47开始从头学习:计划本周尽快学习完成本课程,谨此作为笔记。
有个好的学习计划和思路非常非常重要,非常感谢慕课网提供本套学习计划,希望更多地学习平台能提供像这样全面一条龙学习思路清晰地教程。
计划图:链接
我的学习状况:2015-07-06 10:29:46
开始随记:
php工程师学习计划笔记——01 入门必学web基础 htmlcss基础课程 篇
入门篇:
- text-align:center; 设置文字居中;
- 标签语义化可以给我们带来什么样的好处:
1. 更容易被搜索引擎收录。
2. 更容易让屏幕阅读器读出网页内容。
- 显示斜体
显示粗体 -
1.
和
标签是为了强调一段话中的关键字时使用,它们的语义是强调。
2.
标签是没有语义的,它的作用就是为了设置单独的样式用的。
标签 短文本引用,注意要引用的文本不用加双引号,浏览器会对q标签自动添加双引号,它的语义:引用别人的话。
-
的作用是对长文本的引用;
- 现在一般使用 xhtml1.0 的版本的写法(其它标签也是),这种版本比较规范。
标签是一个空标签,没有HTML内容的标签就是空标签,空标签只需要写一个开始标签,这样的标签有
、
和
。 - 现在一般使用 xhtml1.0 的版本(其它标签也是),这种版本比较规范。
- 地址信息
- 加入一行代码用
,在文章中一般如果要插入多行代码时不能使用
标签了,用。
-
我们可能知道水平渐变的实现,类似这样:{background-image:linear-gradient(left, red 100px, yellow 200px);}
- 列表就可以使用ul-li标签来完成。ul-li是没有前后顺序的信息列表。
- 用
- …:当表格内容非常多时,表格会下载一点显示一点,但如果加上标签后,这个表格就要等表格内容全部下载完才会显示。如右侧代码编辑器中的代码。
- …:表格的头部的一个单元格,表格表头。
- #000000 黑色
-
表格摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化),使搜索引擎更好的读懂表格内容,还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。
语法:
- 表格标题文本,显示在表格上方
- a标签的title属性的作用,鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发中作用很大,主要方便搜索引擎了解链接地址的内容(语义化更友好)
- 新标签中打开target="_blank">click here!
- a标签链接属性,
标签还有一个作用是可以链接Email地址,使用mailto能让访问者便捷向网站管理者发送电子邮件。我们还可以利用
mailto
做许多其它事情。 -
如果mailto后面同时有多个参数的话,第一个参数必须以“
?
”开头,后面的参数每一个都以“&
”分隔,例: -
单选框和复选框
1、type:
当 type="radio" 时,控件为单选框
当 type="checkbox" 时,控件为复选框
2、value:提交数据到服务器的值(后台程序PHP使用)
3、name:为控件命名,以备后台程序 ASP、PHP 使用
4、checked:当设置 checked="checked" 时,该选项被默认选中
同一组的单选按钮,name 取值一定要一致
下拉选框
,value值
selected="selected":
设置selected="selected"属性,则该选项就被默认选中。type="reset" value="重置">
form表单中的label标签不会向用户呈现任何特殊效果,它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本,就会触发此控件。就是说,当用户单击选中该label标签时,浏览器就会自动将焦点转到和标签相关的表单控件上(就自动选中和该label标签相关连的表单控件上)。
例:
css 样式由选择符和声明组成,而声明又由属性和值组成,
选择符:又称选择器,指明网页中要应用样式规则的元素,如本例中是网页中所有的段(p)的文字将变成蓝色,而其他的元素(如ol)不会受到影响。
声明:在英文大括号“{}”中的的就是声明,属性和值之间用英文冒号“:”分隔。当有多条声明时,中间可以英文分号“;”
在CSS中也有注释语句:用
/*注释语句*/
来标明(Html中使用内联式
css样式表就是把css代码直接写在现有的HTML标签中嵌入式css样式,就是可以把css样式代码写在标签之间。
外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“
.css
”为扩展名,在内(不是在
-
水平居中设置-定宽块状元素
当被设置元素为块状元素时用 text-align:center 就不起作用了,这时也分两种情况:定宽块状元素和不定宽块状元素。这一小节我们先来讲一讲定宽块状元素。
满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。我们来看个例子就是设置 div 这个块状元素水平居中:
html代码:
我是定宽块状元素,哈哈,我要水平居中显示。css代码:
也可以写成:
margin-left:auto; margin-right:auto;
注意:元素的“上下 margin” 是可以随意设置的。
-
水平居中总结-不定宽块状元素方法(一)
在实际工作中我们会遇到需要为“不定宽度的块状元素”设置居中,比如网页上的分页导航,因为分页的数量是不确定的,所以我们不能通过设置宽度来限制它的弹性。
不定宽度的块状元素有三种方法居中(这三种方法目前使用的都比多):
-
- 加入 table 标签
- 设置 display;inline 方法
- 设置 position:relative 和 left:50%;
这一小节我们来讲一下第一种方法:
第一步:为需要设置的居中的元素外面加入一个 table 标签 ( 包括
-
- 父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的
-
垂直居中-父元素高度确定的多行文本(方法一)
父元素高度确定的多行文本、图片、块状元素的竖直居中的方法有两种:
方法一:使用插入 table (包括tbody、tr、td)标签,同时设置 vertical-align:middle。
说到竖直居中,css 中有一个用于竖直居中的属性 vertical-align,但这个样式只有在父元素为 td 或 th 时,才会生效。所以又要插入 table 标签了。下面看一下例子:
html代码:
看我是否可以居中。
看我是否可以居中。
看我是否可以居中。
看我是否可以居中。
看我是否可以居中。
css代码:
table td{height:500px;background:#ccc}
因为 td 标签默认情况下就默认设置了 vertical-align 为 middle,所以我们不需要显式地设置了。
垂直居中-父元素高度确定的多行文本(方法二)
在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell,激活 vertical-align 属性,但注意 IE6、7 并不支持这个样式。
html代码:
看我是否可以居中。
看我是否可以居中。
看我是否可以居中。
看我是否可以居中。
看我是否可以居中。
css代码:
这种方法的好处是不用添加多余的无意义的标签,但缺点也很明显,它的兼容性不是很好,不兼容 IE6、7。
-
隐性改变display类型
有一个有趣的现象就是当为元素(不论之前是什么类型元素,display:none 除外)设置以下 2 个句之一:
- position : absolute
- float : left 或 float:right
元素会自动变为以 display:inline-block 的方式显示,当然就可以设置元素的 width 和 height 了且默认宽度不占满父元素。
如下面的代码,小伙伴们都知道 a 标签是行内元素,所以设置它的 width 是 没有效果的,但是设置为 position:absolute 以后,就可以了。
css代码
想不起 display:inline-block 是做什么的小伙伴们,单击“元素分类--内联块状元素”可返回到前面小节进行复习。
学完HC基础篇
标签来制作有序列表来展示。
、
、
标题文本 )。 第二步:为这个 table 设置“左右 margin 居中”(这个和定宽块状元素的方法一样)。
举例如下:
html代码:
css代码:
第二种方法:改变块级元素的 dispaly 为 inline 类型,然后使用 text-align:center 来实现居中效果。如下例子:
html代码:
css代码:
这种方法相比第一种方法的优势是不用增加无语义标签,简化了标签的嵌套深度,但也存在着一些问题:它将块状元素的 display 类型改为 inline,变成了行内元素,所以少了一些功能,比如设定长度值。
方法三:通过给父元素设置 float,然后给父元素设置 position:relative 和 left:50%,子元素设置 position:relative 和 left:-50% 来实现水平居中。
代码如下:
css代码:
这种方法可以保留块状元素仍以 display:block 的形式显示,优点不添加无语议表标签,不增加嵌套深度,但它的缺点是设置了 position:relative,带来了一定的副作用。
这三种方法使用得都非常广泛,各有优缺点,具体选用哪种方法,可以视具体情况而定。
转载于:https://www.cnblogs.com/diyiming/p/4623677.html
你可能感兴趣的:(php,嵌入式,xhtml)