8个前端常用HTML+CSS技巧教程 CSS是一个很独特的语言。看起来非常简单,但是某种特殊效果看似简单,实现起来就颇有难度。 HTML
CSS .breadcrumb { font-size ---- 公众号回复“前端教程源码”获取源码地址 8. ---- 公众号回复“前端教程源码”获取源码地址 总结 我希望这8个前端小技巧和特效对大家有帮助,或多或少有吸收一点新的前端知识。这篇文章提到的内容,其实很多都是值得深挖和学习的。 回想前端这几年,发展真的是突飞猛进,从前端排版,HTML5+CSS3做H5页面,到前端组件化,各种UI框架满天飞。DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-<em>8</em>"> <meta http-equiv="X-UA-Compatible <meta charset="UTF-8"> 描述页面的字符编码方式. 没有这一行可能会导致中文乱码. DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-<em>8</em>"> <meta http-equiv="X-UA-Compatible doctype <em>html</em>> <<em>html</em> lang="en"> <head> <meta charset="UTF-<em>8</em>"> <meta name="viewport" content="width /td> <td> <input type="checkbox" id="1"> <label for="1">前端开发
今天在处理html input输入框时,发现一个问题: 在用户名输入框中输入admin "'p(中间是一个空格),点保存后台提示数据保存成功,按理应该是未修改,通过chrome调试工具发现传给后台的数据却是这样的 1.2.3.4&pwd=&status=0&edit_type=edit 也就是浏览器把空格转成了【%C2%A0】,数据库和前台显示都正常且有一个空格,可是拿出来比较,它们完全不相等 ,通过搜索得知: 前端空格 : 传到后台的是UTF-8空格:C2 A0 即ASCII 194 + 160 所以在后台拿到urser数据后进行空格转换,即可正常保存数据 $data['user '] = str_replace(chr(194).chr(160), ' ', $user); // utf-8空格 参考: https://en.wikipedia.org/wiki/Non-breaking_space https://www.cnblogs.com/oldphper/p/4128138.html
一、课程介绍说明
1) HTML语言概念介绍
2) HTML语言代码编写
二、课程梳理回顾
1) 网络安全课程介绍 3个月时间
2) 网络安全法律法规
3) 网络安全基础知识 名词介绍
4) 网络安全病毒编写 bat批处理文件
5) 网络安全基础防护
三、HTML语言概念介绍
为了编写网页信息
1) HTML代码语言作用
2) HTML代码基本编写方法
3) HTML代码编写练习
windows系统特点: 识别文件类型时,会根据文件扩展名称进行识别
四、 HTML语言代码编写方法:
4.1 HTML元素概念
HTML元素就是预定义好的一些标签,不同标签有不同功能作用 (参考自维基百科)
2、HTML元素、HTML标签
HTML元素由一个开始的HTML标签和结束的HTML标签组成。 HTML元素
(上面已经提过)
一个HTML元素是HTML文件的一个基本组成单元,一个HTML文档由多个HTML元素构成。
用HTML元素写一个网页,就好比用乐高零件组合成一个完整的模型。 更多HTML属性
HTML事件
HTML 事件是发生在 HTML 元素上的事情。我们可以对事件做出回应。如,一个按钮被点击,这时会触发一个点击事件。 关系
简单来说,HTML元素就是HTML文档上的基本单位,HTML属性为这个HTML元素添加附加信息,HTML事件为这个元素提供一系列动作。
4、H5是什么,跟HTML有什么关系? H5是HTML5的简称,HTML5是HTML最新的修订版本。(它的上一个版本是1999年所制定的HTML 4.01。) DOCTYPE html> 浏览器使用的规范
<head> 网页头
<body> 主体部分
<meta> 元数据
meta的name属性(了解)
Keyword(关键字) 为搜索引擎提供的关键字列表 --
目标位置:
demo10.html
-->
<! --
demo09.html
-->
跳转到demo10的底部
6.3 功能链接
<a 王维
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-<em>8</em>">
<meta name="viewport DOCTYPE <em>html</em>>
<<em>html</em> lang="en">
<head>
<meta charset="UTF-<em>8</em>">
<meta name="viewport DOCTYPE <em>html</em>>
<<em>html</em> lang="en">
<head>
<meta charset="UTF-<em>8</em>">
<meta name="viewport DOCTYPE <em>html</em>>
<<em>html</em> lang="en">
<head>
<meta charset="UTF-<em>8</em>">
<meta name="viewport DOCTYPE <em>html</em>>
<<em>html</em> lang="en">
<head>
<meta charset="UTF-<em>8</em>">
<meta name="viewport <标签名称> 如 html,xml
标记语言不是编程语言
快速入门:
语法:
html文档后缀名 .html 或者 .htm
标签分为
围堵标签:有开始标签和结束标签。 > (我也是在那学习的)
介绍
HTML标签也叫HTML元素,是HTML语言中的基本单位,一个HTML页面(网页)由多个 HTML标签构成。
也就是说,我们可以用HTML来编写一个网页。 DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-<em>8</em>">
<title>Title</title>
</head>
<body DOCTYPE html>
HTML 4.01 Strict :
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
告知浏览器其自身是一个 是 HTML 文档中最外层的元素,是所有其他 HTML 元素(除了 <!DOCTYPE>)的容器。
<html> 与 </html> 标签限定了文档的开始点和结束点,在它们之间是文档的头部和主体。 直接创建html文件,直接粘贴进去就能用,不能用随便骂。
<! DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-<em>8</em>">
<title>Document</title>
<style>
#box 'green';
}
box5.onclick = function(){
box.style.backgroundColor = 'transparent';
}
</script>
</html >
开始注释了,代码浓缩在一起了,不难理解
html基本标签这块儿就不说了,先说body下的文本样式吧
<body>
500:服务器内部错误
四、HTML
HTML又称超文本标记语言。
4.1注释的方式
我们通常使用注释来划分区域如:
<! --侧边栏结束-->
4.2HTML的文档结构
HTML的语法格式如下:
<标签名 属性名1="属性值" 属性名2="属性值" ...>
<! --输出内容-->
</标签名>
<html>是文档的开始标记和结束的标记。
<head></head>定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。 </html>
对于中文网页需要使用 <meta charset="utf-<em>8</em>"> 声明编码,否则会出现乱码。 4.3标签的分类
1.HTML的标签分为双标签、自闭合标签两类。
2.html的标签也可分为块级标签和行内标签。
块级标签:独占一行的标签,如h1~h6、p、hr、div等标签。 介绍
HTML元素上的属性,可以在元素中添加附加信息。 DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-<em>8</em>">
<title>Title</title>
</head> DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-<em>8</em>">
<title>基本标签</title>
</head>
<body DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-<em>8</em>">
<title>图像标签</title>
</head>
<body DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-<em>8</em>">
<title>超链接</title>
</head>
<body DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-<em>8</em>">
<title>列表标签</title>
</head>
<body 实体
导入:有一个需求,要做一个html的教材,例:p标签的语法是
,这样在页面中是看不到的,浏览器把这个标签解析了,现在是不需要的,需要将尖括号替换成浏览器不能解析的字符,且在浏览器中需要看到尖括号的形式 ,这个特殊字符就是实体
实体:替换特殊字符的代码,比如说<
空格:
<:<
>:>
HTML教材:
p标签的语法:<p></p>
效果图
多学一招: 表格在网站中应用常用场景通常是金融类的网站,数据做统计,后台管理系统等
1.相关标签
画图说明,table是一个表格的模块,里面有行,光有行不行,里面要有列,在html中不叫列,叫单元格,再有很多行,就组成了表格 前端知识真的还是比较有用的。一直要把前端的学习提上日程,因为各种事情各种拖延,写爬虫的时候也是捎带学习前端的东西,还是需要系统的了解下。
All from W3school. HTML 元素
HTML元素指的是从开始标签到结束标签的所有代码。
HTML 属性
HTML标签可以拥有属性。属性提供了有关HTML元素的更多信息。
属性总是以名称/值对的形式出现。 听说上面的标题会居中 下面是引用: DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-<em>8</em>">
<title>css样式优先级</title>
</head>
< DOCTYPE html>声明为HTML5文档。
<html>、</html>是文档的开始标记和结束标记,是HTML页面的根元素,在它们之间是文档的头部(head)和主体(body)。 注意:对于中文网页需要使用<meta charset="htf-<em>8</em>">声明编码,否则会出现乱码。有些浏览器会设置GBK为默认编码,则你需要设置为<meta charset="gbk"> 。 --指定文档的编码类型-->
<meta http-equiv="content-Type" charset=UTF8">
<! cellpadding:内边框
cellspacing:外边框
width:像素百分比(最好通过css来设置长宽)
rowspan:单元格竖跨多少行
colspan:单元格横跨多少列(即合并单元格)
8. 8.普通按钮
点击不会有任何效果
<input type="button" value="普通按钮">
示意图
? 初识前端
HTML简介历史
HTML(Hyper Text Markup Language)超文本标记语言,它不同于编程语言
超文本就是超过纯文本的范畴,例如描述文本的颜色、大小、字体等信息,或使用图片 前端开发
早期前端开发使用网页三剑客: Dreamweaver,Firework,Flash,微软的有Frontpage. 不管使用什么工具,都不能改变JS兼容、CSS兼容、浏览器版本兼容非常头疼. 2006年JQuery库,出现了JS框架,抹平了平台差异,给予他产生了众多的插件,前端开发终于轻松了些. 2008年V8引擎伴随着 前端工具和框架越来越多,前端开发也不失随便使用什么文本编辑器就可以完成的了,如果使用框架,需要很多工具的配合,配置好一个开发环境非常重要.
硬件发展
最初,网页就是简单的文本,计算机轻松胜任. 众多平台都在思考是否能够以一套架构,解决所有前端问题,使用的技术还是最通用的网页+JS. HTML概述
第一个HTML页面
创建
在vscode中输入html选择html:5即可
?
结构
!doctype 声明
<! DOCTYPE html>告诉浏览器当前html页面的版本
html基本结构
<html lang="en"> <! -- 表示当前HTML的主体,定义最终在浏览器窗口显示的内容 --> </html>
HTML标签
元素(Element):是用来包含文字、图片或者音视频的内容,一般是由标签和内容组成。 ,一般称为内嵌样式表
<style type="text/css"> body { color:red; } </style>
定义元数据信息
<meta charset="UTF-<em>8</em>" 版本定义编码格式:
<meta charset="UTF-<em>8</em>">
定义 HTML 页面的视口:
<meta name="viewport" content="width=device-width <title >
HTML元素属性, 对指定元素进行扩展功能配置
PS: 编写HTML代码信息时,文件中一定不能出现中文符号信息
4.2 HTML基本标签信息: 基本元素信息
--- 段落标签可以自动换行 实体化介绍
如果想让一些特殊符号信息,直接在页面显示,就需要进行实体化处理
4.5 HTML超链接:
This text
【前端】初识HTML
前端(一)-Html
网页布局-使用h5新标签
<!前端基础:HTML
前端基础-HTML
Hello World
</body>
</html>
标签学习:
文件标签:构成html最基本的标签
html :html文档的根标签
head:头标签。 用于指定html文档的一些属性。引入外部的资源
title:标题标签。
body:体标签
:html5中定义该文档是html文档
文本标签:和文本有关的标签
* 注释:<! 语义化标签:html5中为了提高程序的可读性,提供了一些标签。
1. 【前端】HTML标签
前端html换肤
前端之HTML
【前端】HTML属性
HTML前端基础
前端基础-HTML实体
前端基础-HTML表格
前端入门学习--HTML
<q>上面说的对,我是引用</q>前端之HTML内容
前端基础-HTML表单
前端之HTML
前端课程——HTML概述