PHP学习

二.Html +css

  1. html 介绍

　　　　——基本信息：

　　　　　　英文全称：HyperText Markup Language

　　　　　　中文名：超文本标记语言

　　　2.易忘知识点

　　　　(1) html符号实体（又称 字符实体）

　　　　——在网页上显示一些特殊的字符，比如空格（   ），版权号（ © ）

　　　　（此处应有个图。）

　　　　(2) URL 统一资源定位

　　　　　——就是链接，比如：http://www.baidu.com

　　　　(3) 标签介绍

　　　　　　1) 表格 <table></table>

　　　　　　——在较早之前，使用table标签来设置布局。后来改为使用div来设置布局

　　　　　　　　缺点：表格的冗余代码较多，在设置网页来说，要优先考虑较容易被关键词搜索到，而这个就会对搜索引擎搜索造成困难。不利于网页的推广。

　　　　　　——专属属性：

　　　　　　{

　　　　　　　　Cellspacing 两个单元格间的间隙==单元格的外边距

　　　　　　　　Cellpadding 单元格的内边距

　　　　　　}

　　　　　　——练习：

　　　　　　代码：

 <table>

 　　<tbody>

 　　　　<tr>

  　　　　<!-- 跨列 colspan=”3”该列占3列。-->

 　　　　　　<td colspan=”3”>星期一菜谱</td>

 　　　　</tr>

 　　　　<tr>

 　　　　　　<!--跨行 rowspan  向下跨-->

 　　　　　　<td rowspan =”2”>素菜</td>

 　　　　　　<td>青草茄子</td>

 　　　　　　<td>花椒扁豆</td>

 　　　　</tr>

 　　　　<tr>

 　　　　　　<td>小葱豆腐</td>

 　　　　　　<td>炒白菜</td>

 　　　　</tr>

 　　　　<tr>

21　　　　　　 <td>荤菜</td>

22　　　　　　 <td>油焖大虾</td>

 　　　　　　<td>海参鱼翅</td>

 　　　　</tr>

 　　　　<tr>

 　　　　　　<td>红烧肉<img src=”” /></td>

 　　　　　　<td>烤全羊</td>

29 　　　　</tr>

 　　</tbody>

 </table>

　　　　　　2) 图片 <img>

　　　　　　——图片自适应大小：设置图片的宽度或者高度，该图片就是自适应调整大小。

　　　　　　3) 有序列表 <ol>  <li></li> </ol>

　　　　　　4) 无序列表 <ul>  <li> </li> </ul>

　　　　　　——练习：

　　　　　　5) 框架 frameset

　　　   　 

　　　　　　注意：a页面中不能有body标签及body标签的内容体

　　　　　　比如：

　　　　　　　　a.html   

　　　　　　　　1) 该页面不能有body等内容

　　　　　　　　2) 该页面不能有任何的文字==body体）

　　　　　　　　b.html   

　　　　　　　　C.html   

    • 　　专属属性：{

　　　　　　　　　　边框：frameborder

　　　　　　　　　　边框不能动：noresize

　　　　　　　　　　滚动条：scrolling {

　　　　　　　　　　　　Yes ; no ; auto }

　　　　　　　　}

　　　　　　6) 超链接 <a> </a>

　　　　　　　　专属属性：{

　　　　　　　　　　Url地址：href

　　　　　　　　　　目标：target {

　　　　　　　　　　　　_blank :表示打开一个全新的页面

　　　　　　　　　　　　_self :表示替换本页面（默认）

　　　　　　　　　　　　_top:整个浏览器窗口

　　　　　　　　　　　　_parent：父窗口

　　　　　　　　　　***还有一个就是在target的值中直接写对应的frame的name

　　　　　　　　　　}

　　　　　　　　}

　　　　练习：

　　　　　　7) 浮动窗口 <iframe />

　　　　　　——形成画中画的效果，没有body标签的限制。

　　　　　　练习：点击超链接，iframe1就从百度页面切换成淘宝的页面

　　　　　　　　

　　　　代码：

　　　　　　8) 表单元素 <from></form>

　　　　　　——从客户端发送数据给服务器端。把数据交给服务器处理。

　　　　　　<form action=”” method=””>

　　　　　　　　<!--action 的值是提交到哪个地方处理数据 method 是指提交的方式：POST/GET -->

　　　　　　</form>

　　　　***一般来说，表单元素都要被form标签（<form></form>）包起来。

　　　　　　专属属性：{

　　　　　　　　输入框 input

　　　　　　　　<input  type=”类型”name=”名字” />

　　　　　　　　类型type ：{

　　　　　　　　　　单选框 radio

　　　　　　　　　　复选框 checkbox

　　　　　　　　　　文本域 textarea

　　　　　　　　　　密码框 password

　　　　　　　　　　上传文件 file

　　　　　　　　　　隐藏域 hidden

　　　　　　　　　　——私下提交数据，不影响界面的效果。

　　　　　　　　　　下拉框 select+option

　　　　　　　　　　提交 submit

　　　　　　　　　　重置 reset

　　　　　　　　}

　　　　　　}

　　　　练习：

　　　　建议密码用套接层封装，然后数据库再解密这样。用post 或者get 再抓包的时候都会被抓到。

    • 　　输入框详解：
    1. 　　下拉框：

　　　　　　　　<select name =”XX”multiple（多选）>

　　　　　　　　　　<option value=”hh” selected(默认选中)>选项1</option>

　　　　　　　　　　<option value =”hh2”>选项2</option>

　　　　　　　　</select>

　　　　　　2.　　文本域 textarea

　　　　　　　　Cols ==列数

　　　　　　　　Rows == 行数

　　　　　　3.上传文件 file

　　　　　　　　<input type=”file” name =”myfile”>上传文件

　　　　

　　　　　　9) 多媒体标记embed

　　　　　　　　——嵌入视频或者音频。

　　　　　　　　语法<embed src=””>

　　　　　　10) 语言字符集 <meta />

　　　　　　——告诉浏览器该页面要用utf-8 的编码来显示。

　　　　　　如：

　　　　　　<meta  http-equiv=”content-type”content=”text/html;charset=utf-8”>

　　　　　　11) 不换行 <nobr/>

　　　　　　12) 换行 <br/>

　　　　(4) 常见属性介绍

　　　　　　1) 背景颜色: background

　　　　　　2) 高度 height

　　　　　　3) 宽度 width

　　　　　　4) 对其方式 align

　　　　　　——向左对齐：left

　　　　　　　　向右对齐：right

　　　　　　　　居中：center

　　　　(5) 注释方式 <!-- 此为注释  -->

　　　　——不能嵌套！

　　　　(6) Html 文件结构

<html>

<head>

<title></title>

<!--meta语言字符集的信息，告诉浏览器该页面要用utf-8 的编码来显示。在国内，一般编码是 gbk（显示的中文更多） 和gb2312

Utf-8 为了编码的兼容性而设计出来的编码。-->

<meta  http-equiv=”content-type”content=”text/html;charset=utf-8”>

</head>

<body>

</body>

</html>

(7) 图形映射 <map></map>

——条件：要理解坐标体系

效果：点击那个area的区域，就可以跳转页面或者其他。

代码：

(8)

*****一些额外话：********

  • W3C ：

——基本信息：

英文全称：World Wide Web Consortium

中文名： 万维网联盟

  • SEO搜索优化：

——基本信息：

英文全称：Search Engine Optimization

中文名：搜索引擎优化

释义：这是一种利用搜索引擎的搜索规则来提高目前网站在有关搜索引擎内的自然排名的方式。

  • 页面设置编码为utf-8 后，但是页面上的中文还是乱码

——检查下该页面的保存的文件编码，是否是utf-8编码

新建txt 文件，一般默认是ansi的编码。

——ansi是美国国家标准协会制定的一套编码

  • 线包字的效果

代码;

******************

html 思维导图：

php学习（二）——html + css的更多相关文章

  1. 前端学习(二）css样式笔记（笔记）

    background-image:url(img/xiaofeiji.jpg)背景图:url(图片路径):(背景图默认平铺) background-repeat:repeat-x/repeat-y/n ...

  2. HTML基础学习(二)—CSS

    一.CSS概述     CSS(Cascading Stytle Sheets)层叠样式表,用来定义网页的显示效果.可以解决HTNL代码对样式定义的重复,提高了后期样式代码的可维护性,并增强了网页的显 ...

  3. 我们应当怎样学习HTML和CSS

    目标读者:web前端小白.大神请绕路 学习一门新技术,应当找一本经典入门书,在两三天之内快速翻阅完毕,了解其概貌. 然后再制定一个学习路线图(这个路线图绝大多数情况下非书本目录的顺序),接着遵循学习路 ...

  4. ReactJS入门学习二

    ReactJS入门学习二 阅读目录 React的背景和基本原理 理解React.render() 什么是JSX? 为什么要使用JSX? JSX的语法 如何在JSX中如何使用事件 如何在JSX中如何使用 ...

  5. TweenMax动画库学习(二)

    目录            TweenMax动画库学习(一)            TweenMax动画库学习(二)            TweenMax动画库学习(三)            Tw ...

  6. SpringMVC入门学习(二)

    SpringMVC入门学习(二) ssm框架 springMVC  在上一篇博客中,我简单介绍了一下SpringMVC的环境配置,和简单的使用,今天我们将进一步的学习下Springmvc的操作. mo ...

  7. SVG 学习<二>进阶 SVG世界，视野，视窗 stroke属性 svg分组

    目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...

  8. day 82 Vue学习二之vue结合项目简单使用、this指向问题

    Vue学习二之vue结合项目简单使用.this指向问题   本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 ...

  9. 还需要学习的十二种CSS选择器

    在前面的文章中,我们在介绍了<五种你必须彻底了解的CSS选择器>,现在向大家介绍,还需要学习的另外十二种CSS选择器.如果你还没有用过,就好好学习一下,如果你已经熟知了就当是温习. 一.X ...

  10. day 81 Vue学习二之vue结合项目简单使用、this指向问题

    Vue学习二之vue结合项目简单使用.this指向问题   本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 ...

随机推荐

  1. A1261. happiness(吴确)[二元组暴力最小割建模]

    A1261. happiness(吴确) 时间限制:500ms   内存限制:512.0MB   总提交次数:158   AC次数:72   平均分:56.71   将本题分享到:        查看 ...

  2. git、git bash、git shell的区别

    之前安装了github(CSDN上找的,官网的下不来,貌似要FQ - -)后,自带了git shell,如图: 输命令的时候发现网上的一些命令不管用,譬如:git ls –a 查看隐藏的 .git 文 ...

  3. 相似性分析之Jaccard相似系数

    Jaccard, 又称为Jaccard相似系数(Jaccard similarity coefficient)用于比较有限样本集之间的相似性与差异性.Jaccard系数值越大,样本相似度越高 公式: ...

  4. google-java-format

    https://github.com/google/google-java-format

  5. Python计算地图上两点经纬度间的距离

    处理地图数据时,经常需要用到两个地理位置间的距离.比如A点经纬度(110.0123, 23.32435),B点经纬度(129.1344,25.5465),求AB两点之间的距离.我们可以用haversi ...

  6. WebStorm7.0的破解版

    EMBRACE 24718-1204201000001h6wzKLpfo3gmjJ8xoTPw5mQvYYA8vwka9tH!vibaUKS4FIDIkUfy!!f3C"rQCIRbShpS ...

  7. vue事件修饰器

    事件修饰器 Vue.js 为 v-on 提供了 事件修饰符.通过由点(.)表示的指令后缀来调用修饰符.· .stop .prevent .capture .self <div id=" ...

  8. CNI bridge 插件实现代码分析

    对于每个CNI 插件在执行函数cmdAdd之前的操作是完全一样的,即从环境变量和标准输入内读取配置.这在http://www.cnblogs.com/YaoDD/p/6410725.html这篇博文里 ...

  9. LRU经典算法的原理与实现

    LRU  least recently used.顾名思义,是根据数据的活跃度进行更新的缓存算法. LRU Cache的LinkedHashMap实现: LinkedHashMap自身已经实现了顺序存 ...

  10. EXP直接导出压缩问津，IMP直接导入压缩文件的方法

    在10G之前,甚至在10G的Oracle环境中,有很多数据量不大,重要性不太高的系统依然采用EXP/IMP逻辑导出备份方式,或者,作为辅助备份方式. 通常情况下,我们都是这样操作的:1.exp导出2. ...