day44前端开发1之html基础
web前端开发1
一.前端三剑客之html
1.为标记语言,是非编程语言
2.自身不具备逻辑,遇到负责重复操作只能全部手写(Ctrl+C > V)
3.组成:标签, 指令, 实体
标签:由<>包裹,以字母开头可以结合合法字符可以被浏览器解析的标记(纯字母或字母与数字组合)
<zero>小VV</zero>
指令:被<>包裹,以!开头的可以被浏览器解析的标记
<!dcotype> <!-- html的注释 -->
实体:被&;包裹的#开头的十进制数或特殊字母组合
<zero>
文档类型:规定该页面的标签遵循的html语法(h5)
<!doctype html>
二.第一个页面
<!-- 文档类型; 标签语法为h5 -->
<!-- h5语法特点 -->
<!--
1.不区分大小写
2.有很多系统标签,一般都具有语义
3.可以随意定义自定义标签
4.h5内容不保留空白字符(制表符)
5.提倡小写
-->
<!doctype html>
<!-- html:文档根标签 -->
<html>
<!-- html只有一儿一女:head,body,所以可以省略缩减 -->
<!-- html语法中没有明确规定缩减规则,但从美观可读性出发,开发者要严格遵循缩减 -->
<head> 主要放的是功能
<!-- 包含内容:样式表,脚本,元信息,内嵌代码块 -->
<!-- 字符编码 -->
<meta charset="utf-8" />
<!-- <meta http-equiv="content-type" content="text/html;charset=utf-8" /> --
<!-- SEO -->
<meta name="keywords" content="培训,Python培训,IT培训,peixun" />
<meta name="description" content="老男孩皇家培训机构" />
<!-- 移动适配 -->
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<!-- tag图片 --> 网站的图标
<!-- <link rel="icon" type="image/x-icon" href="https://www.baidu.com/favicon.ico"> -->
<link rel="shortcut icon" type="image/x-icon" href="icon.png">
<title>第一个页面</title>
</head>
<body> 主要放的是内容
<!-- 包含内容:几乎一切内容 -->
</body>
</html>
<!-- 以上为最简易页面模块html>head+body -->
<!-- 一个页面只存在一个标准模板 -->
<!-- doctype必须出现在第一行 -->
<!-- 特殊:如果没有书写模块,浏览器解析会按"自己心情"帮你添加模板 -->
三.常用标签
1.head内相关标签
1、指定字符集(字符编码)
<meta charset="gbk">
2、页面描述
<meta name="Description" content="具体描述。。。">
3、关键字：有助于搜索引擎SEC优化，再怎么优化也抵不过竞价排名
<meta name="Keywords" content="网易，邮箱，游戏，新闻">
4、3秒后跳转(了解)
<meta http-equiv="refresh" content="3,http://www.baidu.com">
5、三秒刷新(了解)
<meta http-equiv="refresh" content="3">
6、移动适配 (了解)
7、标题
<title>百度一下，你就知道</title>
8、网站的图标
<link rel="icon" href="https://www.baidu.com/favicon.ico">
9、定义内部样式
<style></style> (css定制 当前了解)
10、引入外部样式文件(css定制,引入css文件 当前了解)
<link rel="stylesheet" href="mystyle.css">
11、定义JavaScript代码或引入JavaScript文件(js定制,引入js文件 当前了解)
<script src="hello.js"></script>
2.body内相关标签
1.无语义标签 (css重点介绍)
div:最常用的标签,没有之一
<div></div>
span:最常用的纯文本标签
<span></span>
2.常用语义标签
1.标题:h1~h6
h1标签较经常出现,作为页面最大title形式出现,且一个页面一般只出现一次
<h1>一级标题</h1>
<h2>二级标题</h2>
<h6>六级标题</h6>
2.br:换行 | hr分割线
<br>好<br>的<br> <hr>呵<hr>呵<hr>
3.文本标签
i和em:很常用的标签,一般不作为斜体文本使用,作为字体图片使用,原因写法简单
<i>斜体</i> <em>以斜体方式强调</em>
<b>加粗</b> <strong>以加粗方式强调</strong>
p:段落标签具有具体区域,成段出现,段落之间存在段落间距
<p>段落</p>
per原样文本标签:会保留所有字符,原样显示
<pre></pre> ܻ
ins和u:样式具有下划线
<ins>插入的文本强调且有下划线</ins> <u>插入的文本具有下划线</u>
<del>删除的文本</del> <s>删除的文本</s>
在html5中
strong == b
ins == u
em == i
del == s
新的标签是有语义的，而老的只是单纯的添加样式（这是CSS干的事）
strong的语义：定义重要性强调的文字
ins的语义（inserted）：定义插入的文字
em的语义（emphasized）：定义强调的文字
del的语义（deleted）：定义被删除的文字
sup上标子<!-- 10的平方 -->
<span>10<sup>2</sup></span>
sub下标子<!-- 水分子 -->
<span>H<sub>2</sub>O</span>
small右标:小号字体
<span>你很帅<small>谁信</small></span>
注明拼音<!-- pinyin -->
<ruby>牛掰<rt>niubai</rt></ruby>
四.标签分类
1.单双标签 -->
<!-- 标签都需要闭合 -->
<!-- 单标签:闭合操作在本身的尾部,并且可以省略(自定义标签要自我标注闭合) ==> 单标题一般具有特殊功能,单标签主功能 -->
<!-- 双标签:闭合操作有对应的结束标签完成,也可以省略(强烈不建议) ==> 双标签一般具有文本(普通文本与超文本),双标签主内容 -->
2.行块标签 -->
<!-- 行:内联,不具备自身宽高,通常同行显示 -->
<!-- 块:块级,具备自身宽高,通常换行显示 -->
<!-- 自定义标签均属于内联标签 -->
<!-- span{我是span$}*2+div{我是div$}*2 -->
3.单一组合标签 -->
<!-- 组合标签必须组合出现,协同下才能显示产生相应的内容与效果
day44前端开发1之html基础的更多相关文章
- day44前端开发2之css基础
web前端开发1一.前端三剑客之css 1.选择器:由标签/类/id单独或组合出现 2.作用域:{}内部区域 3.样式块:满足css链接语法的各种样式 eg:引入的基本样式 <head> ...
- 《JavaScript & jQuery交互式Web前端开发》之JavaScript基础指令
在本节中.你将開始学习阅读和编写JavaScript代码,还将学习怎样编写Web浏览器可以遵照运行的指令.在開始学习后面章节中的更复杂的概念之前.我们先学习语言的一些核心部分,然后看看怎 ...
- WEB前端开发--2（HTML基础）
HTML基础 HTML不分大小写 1.HTML概述 HTML(HyperText MarkUp Language)"超文本标记语言",他是制作网页的标准语言 1.1 标签--元素 ...
- 从零开始学习前端开发 — 2、CSS基础
一.CSS简介 1.CSS是什么 CSS是Cascading Style Sheets的简称,中文称为层叠样式表.特点:实现了表现与结构相分离 2.css基础语法 css是由选择符和声明两大部分组成 ...
- 〖前端开发〗HTML/CSS基础知识学习笔记
经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构: HTML文件的固定结构: <html> <head>...</head> & ...
- Web 前端开发代码规范（基础）
一. 引言 对于一个多人团队来说,制定一个统一的规范是必要的,因为个性化的东西无法产生良好的聚合效果,规范化可以提高编码工作效率,使代码保持统一的风格,以便于代码整合和后期维护. 二. HTML/CS ...
- 阶段5 3.微服务项目【学成在线】_day02 CMS前端开发_03-vuejs研究-vuejs基础-入门程序
本次测试我们在门户目录中创建一个html页面进行测试,正式的页面管理前端程序会单独创建工程. 在门户目录中创建vuetest目录,并且在目录下创建vue_01.html文件 <!DOCTYPE ...
- 从零开始学习前端开发 — 1、HTML基础
一.web标准 web标准-网页制作的标准,它是由一系列标准组成的,主要包含三个方面:结构(html,xhtml),表现(css),行为(javascript) 注:结构和表现的标准由w3c(万维网联 ...
- 阶段5 3.微服务项目【学成在线】_day02 CMS前端开发_02-vuejs研究-vuejs基础-MVVM模式
1.2.1 MVVM模式 vue.js是一个MVVM的框架,理解MVVM有利于学习vue.js. MVVM拆分解释为: Model:负责数据存储 View:负责页面展示 View Model: ...
随机推荐
- POST形式 soapUI调用WebService的restful接口，传入json参数，并且返回json
第一次使用POST形式传JSON字符串,怎么都调不到后台方法,只是因为注解没加对…… CXF的WebService接口类 package com.zit.webservice.main; import ...
- C++ 抽象类与接口
1. 抽象类 在面向对象编程中,抽象类是一种只能定义类型,不能生成对象的类,它是对一系列看上去不同,但是本质相同的具体概念的抽象.最典型的的抽象类就是”图形”,三角形.矩形.梯形都是图形,它们都具有 ...
- LeetCode 47 全排列II
题目: 给定一个可包含重复数字的序列,返回所有不重复的全排列. 示例: 输入: [1,1,2] 输出: [ [1,1,2], [1,2,1], [2,1,1] ] 解题思路: 与上一题相比,这题多了一 ...
- JVM Optimization
架构图 基本概念说明 堆(heap):数据存储,对象实例:空间往上增长,线程共享区:大小可通过-Xmx和-Xms配置 新生代(Young Generation):划分为Eden Space和两个Sur ...
- 事件驱动模型和异步IO多路复用
事件驱动模型 协程:遇到IO操作就切换. 但什么时候切回去呢?怎么确定IO操作完了? 很多程序员可能会考虑使用“线程池”或“连接池”.“线程池”旨在减少创建和销毁线程的频率,其维持一定合理数量的线程, ...
- 一个class标签里面有多个属性时的提取标签
<div class="uibox-con carpic-list03 border-b-solid"> #即这个标签同时满足三个class:“uibox”.“ca ...
- Fibonacci Heaps
Mergeable heapsA mergeable heap is any data structure that supports the following five operations,in ...
- Open Nginx gzip
默认情况下,Nginx的gzip压缩是关闭的, gzip压缩功能就是可以让你节省不少带宽,但是会增加服务器CPU的开销哦,Nginx默认只对text/html进行压缩 ,如果要对html之外的内容进行 ...
- 素数定理π(n)~n/lnn弱化版证明
在大半年前写的Miller-Rabin素数测试正确性证明中使用过此结论~当时完全不会证,现在进步了一点点会证弱化版的了Orz 完整版的素数定理: π(n):=|{p|p<=n,p是素数}| li ...
- 2017-2018 ACM-ICPC, NEERC A题Automatic Door 挺棘手的模拟
题目链接:http://codeforces.com/contest/883/problem/A 题意大致就是有一个门,有n个人有规律的来,时刻分别是a,2a,3a.....na.有m个人无规律的来, ...