前端html/css/script基础
1. 基础模板
<!DOCTYPE html>
<html>
<head>
<meta charert="utf-8" />
<title>第一个页面</title>
</head>
<body>
day01
第一个页面
</body>
</html>
2. 模板解读
- <DOCTYPE>:指定文档类型,是文档声明,必须写在html文档的第一行,位于<html>标签之前,表明该文档是html5标签,规定html标签语法。
- <html>:文档根标签,标注着文档(页面)的开始与结束。
html的lang属性可用于网页或部分网页的语言。通常用于搜索引擎和浏览器的统计分析,不定义也没有什么影响。
根据W3C推荐标准,您应该通过<html>标签中的 lang 属性对每张页面中的主要语言进行声明,比如:
<html lang="en"></html>
- <head>:文档的开头,可以引用脚本文件、指定样式表、书写逻辑代码块、提供元素信息。包含了文档的与智能数据(meta),如<meta charert="utf-8" /> 定义网页编码格式为utf-8。
- body:文档主体标签,包含文档所有文本与从超文本内容
- title:文档tag标题标签,设置文档tag的标题内容 3. meta(元标签)
字符编码
<meta charset="utf-8">
<meta http-equiv="content-type"
conntent ="text/html;charset=utf-8"/>
SEO
<meta name="keyword" content="8到12个以英文逗号隔开的单词或词语">
<meta name="descreption" content="80字以内的一段话,与网站内容相关">
移动适配
<meta name="viveport" content="width=device,initial-scale=1,minium-scale=1,user-scaleble=no"/>
4. html标签纤细语法与注意点
- 标签的语法:
<标签名 属性1=“值1” 属性2=“值2”........>内容部分</标签名>
<标签名 属性1=“值1” 属性2=“值2”........./>
5. html标签分类及语义
1. <br> :换行
2. <hr> :分割线
3. <font> :修改文字大小,颜色
<font color="red" size="10px">岂能尽如人意</font>
4. <u> :下划线
5. <i> :倾斜
6. <s> :下划线
6. <b> :加粗
<b>论颜值,我秒杀宇宙</b>
6. 字符实体
html特殊符号对照表
注意:实体名称对大小写敏感
内容 代码
空格
> >
< <
& &
¥ ¥
版权 ©
注册 ®
7. h系列标签
语义:标记内容为一个标题,全称headline
h系列标签从h1-h6共6个,没有h7标签,标记内容为1~6级标题,h1用作主标题(代表最重要的),其实是h2。。。
虽然h1-h6标签的显示样式是从大到小,但再次强调:记忆HTML标签的显示样式是没有意义的
<!DOCTYPE HTML>
<html>
<head lang='en'>
<meta charset="utf-8">
<title>Egon才华无敌</title>
</head>
<body>
<h1>一级标题</h1><h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<h7>没有七级标题</h7>
没有七级标题
</body>
</html>
8. p标签
语义:标记内容为一个段落,全程paragraph
<!DOCTYPE HTML>
<html>
<head lang='en'>
<meta charset="utf-8">
<title>Egon无敌</title>
</head>
<body>
<h1>Egon</h1>
<p>论颜值,鹤立鸡群</p>
<p>论才华,天下无敌</p>
</body>
</html>
前端html/css/script基础的更多相关文章
- 前端工程师面试问题归纳(一、问答类html/css/js基础)
一.参考资源 1.前端面试题及答案整理(一) 2.2017年前端面试题整理汇总100题 3.2018最新Web前端经典面试试题及答案 4.[javascript常见面试题]常见前端面试题及答案 5.W ...
- WEB前端开发CSS基础样式全面总结
Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...
- 【笔记-前端】div+css排版基础,以及错误记录
现在的网站对于前端的排版已经逐渐不使用<table>,而是使用div+css. 使用这种方法的最大好处就在于在维护页面时,可以只维护css而不去改动html. 可是这种方式对于初学者来说可 ...
- 前端之CSS基础
前端之CSS 1. CSS CSS定义如何显示HTML元素. 当浏览器读到一个样式表,他就会按照这个样式表来对文档进行格式化(渲染). 3.CSS语法 1)CSS实例 每个CSS由两部分组成: 选择器 ...
- 前端之css
前端之css 本节内容 css概述及引入 css选择器 css常用属性 1.css概述及引入 CSS概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,用来控制网页数 ...
- 2天驾驭DIV+CSS (基础篇)(转)
这是去年看到的一片文章,感觉在我的学习中,有不少的影响.于是把它分享给想很快了解css的兄弟们. 基础篇[知识一] “DIV+CSS” 的叫法是不准确的[知识二] “DIV+CSS” 将你引入两大误区 ...
- 第二篇:web之前端之css
前端之css 前端之css 本节内容 css概述及引入 css选择器 css常用属性 1.css概述及引入 CSS概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式 ...
- 我的前端之旅--SeaJs基础和spm编译工具运用[图文]
标签:seajs nodejs npm spm js 1. 概述 本文章来源于本人在项目的实际应用中写下的记录.因初期在安装和使用Seajs和SPM的时候,有点不知所措的经历.为此,我 ...
- [转]前端利器:SASS基础与Compass入门
[转]前端利器:SASS基础与Compass入门 SASS是Syntactically Awesome Stylesheete Sass的缩写,它是css的一个开发工具,提供了很多便利和简单的语法,让 ...
随机推荐
- hdu1025 最大上升字串
Constructing Roads In JGShining's Kingdom Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65 ...
- vs2010 MSDN文档安装方法
vs2010的MSDN是不能独立安装,必须安装VS2010后才能安装. 安装方法: 1.vs2010的ISO光盘文件中,里面会有个ProductDocumentation文件夹,其实这个就是安装MSD ...
- 怎样用Google APIs和Google的应用系统进行集成(5)----怎样把Google Tasks的JSON Schema转换成XML的Schema(XSD)?
前面说了一些Google API的介绍,可是在实际的开发其中,我们可能须要把Google RESTful API返回的JSON数据转换成XML数据输入到第三方系统,这在企业应用集成里面很的常见. 那么 ...
- boa web服务器
Boa是一种非常小巧的Web服务器,其可执行代码只有大约60KB左右.作为一种单任务Web服务器,Boa只能依次完成用户的请求,而不会fork出新的进程来处理并发连接请求.但Boa支持CGI,能够 ...
- regcomp/regexec/regfree--POSIX regex functions
语法 #include <sys/types.h> #include <regex.h> int regcomp(regex_t *preg, const char *rege ...
- Using a long as ArrayList index in java
http://stackoverflow.com/questions/459643/using-a-long-as-arraylist-index-in-java http://bbs.csdn.ne ...
- XMLHttpRequest的withCredentials属性
最近对接第三方网站出现一下错误:Access to XMLHttpRequest at 'https://third.site.com/request_url' from origin 'https: ...
- Hadoop大数据处理读书笔记
几个关键性的概念 云计算:是指利用大量计算节点构成的可动态调整的虚拟化计算资源.通过并行化和分布式计算技术,实现业务质量可控的大数据处理的计算技术. NameNode:是HDFS系统中的管理者.它负责 ...
- Openstack(Kilo)安装系列之nova(八)
计算节点 To install and configure the Compute hypervisor components 1.Install the packages: yum install ...
- MFC多国语言——资源DLL
此随笔中主要内容来自http://blog.csdn.net/china_hxx/article/details/10066655,原出处不详. 以下内容基于VC 6.0.要实现界面多语言化,必须要先 ...