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. 160707、Tomcat 使用 c3p0连接池

    Tomcat 中Jndi是使用Tomcat自带的连接池,由于客户要求,抛弃Tomcat自带的连接池.使用c3p0 .经过几个小时调试,解决方案如下: 环境:Tomcat 6 下面来看Jndi 与 c3 ...

  2. delphi ----处理SQL server主键自增，并给定值

    获取一个表中最大的值. function GetNEWID(tablename: string): string; begin Result:=''; with DMW_Public.DQ_Pub d ...

  3. 如果"一切是IO"“一切是file”是成立的，那么上述的想法也一定可以实现吧 awk对apache日志分析 ---

    定时执行 自动化处理 直接入库 再去读取这个file入库: root@VM---ubuntu:/var/log/apache2# awk '{print $1 "\t" $7}' ...

  4. kafka-docker----(how to setup http proxy in container??)

    https://github.com/wurstmeister/kafka-docker environment: KAFKA_ADVERTISED_HOST_NAME: 10.10.160.243 ...

  5. Eclipse打包java工程

    Eclipse打包java工程步骤如下: 1.选择预打包的工程->Export. 2.选择java->JAR file. 3.导出JAR文件设置. 这里有几个选项: Export gene ...

  6. Spring 框架整合JUnit单元测试

    // 整合之前 public class Demo{ @Test public void fun(){ // 获取工厂,加载配置文件 ApplicationContext ac = new Class ...

  7. IO 之 File 类

    位于 java.io 包 用来将文件或者文件夹封装成对象 方便对文件和文件夹的属性信息进行操作 File 对象可以作为参数传递给流的构造函数 构造函数 // 可以将一个已存在的, 或者不存在的文件或者 ...

  8. django 中的路由系统(url)

    路由系统 根据Django约定,一个WSGI应用里最核心的部件有两个:路由表和视图.Django框架 的核心功能就是路由:根据HTTP请求中的URL,查找路由表,将HTTP请求分发到 不同的视图去处理 ...

  9. scc

    CSS简介 CSS介绍 CSS(cascading style sheet,层叠样式表)是一种制作网页的新技术,现在已经为大多数浏览器所支持,成为网页设计必不可少的工具之一 CSS语法 CSS实例 每 ...

  10. C#转义字符(好记性不如烂笔头)

    C#转义字符: ·一种特殊的字符常量:·以反斜线"\"开头,后跟一个或几个字符.·具有特定的含义,不同于字符原有的意义,故称“转义”字符.·主要用来表示那些用一般字符不便于表示的控 ...