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. 【BZOJ2836】魔法树 树链剖分

    [BZOJ2836]魔法树 Description Input Output Sample Input 4 0 1 1 2 2 3 4 Add 1 3 1 Query 0 Query 1 Query ...

  2. iOS 将金钱变为逗号形式

    ; NSNumberFormatter * formatter = [NSNumberFormatter new]; [formatter setNumberStyle:NSNumberFormatt ...

  3. Understanding Tensorflow using Go

    原文: https://pgaleone.eu/tensorflow/go/2017/05/29/understanding-tensorflow-using-go/ Tensorflow is no ...

  4. Lock wait timeout exceeded; try restarting transaction 3千万数据删除

    Lock wait timeout exceeded; try restarting transaction 0DELETE FROM sta_addr WHERE date="2018-1 ...

  5. 常用的SQLalchemy 字段类型

    https://blog.csdn.net/weixin_41896508/article/details/80772238 常用的SQLAlchemy字段类型 类型名 python中类型 说明 In ...

  6. 解决ajax post json数据 后端无法收到的问题

    如图,想把input框中的文字以json格式post出去,结果后端收不到 使用wireshark抓包,根本没有抓到发往服务器的包,说明错误在前端. 后来发现ajax post json数据的时候key ...

  7. django博客项目2.建立 Django 博客应用

    建立博客应用 我们已经建立了 Django 博客的项目工程,并且成功地运行了它.不过到目前为止这一切都还只是 Django 为我们创建的项目初始内容,Django 不可能为我们初始化生成博客代码,这些 ...

  8. javascript把RGB指定颜色转换成十六进制颜色(Converting R,G,B values to HTML hex notation)

    Prologue 看见一篇非常好的外国文章,Making annoying rainbows in javascript,事实上我当时非常想把它翻译下来的,可是对于一个连六级都没过的人确实有点难度,一 ...

  9. 解决linux下python多版本兼容问题？

    环境:CentOS 7(7下默认安装python2.7) Pyhon3在CentOS中需要依赖一些其他的包,我们一次性用yum安装一下: yum install zlib-devel bzip2-de ...

  10. Django框架之ORM（数据库）操作

    一.ORM介绍 映射关系: 表名 -------------------->类名 字段-------------------->属性 表记录----------------->类实例 ...