html基本基础
一 HTML5是用来做什么的?
PSD2HTML
信息
信息差(信息不对称)
二 html文件新建流程:
新建文本文件
网页文件后缀 .html
修改编码:ANSI格式,UTF-8无BOM格式
=======================
三 HTML5
狭义:超文本标记语言(第5代)
HTML4 - XHTML - HTML5
广义:H5
结构层:HTML5
样式层:CSS3
行为层:DOM,JavaScript
=======================
四 HTML标签(元素)
语法结构:
<标签开始 属性名="属性值">标签内容</标签结束>
<标签开始 属性名="属性值">
<标签开始>
凡是成对出现的语言结构,一律先输入起始结束,再填充内容
五:常用标签(最常用的标签,基本写出网站的90%的呢内容)
1:超链接:行内
<a href="http://baidu.com/">百度</a>
<a href="http://baidu.com/" target="_blank">新窗口打开</a>
<a href="aaa">aaa文件夹</a>
<a href="bbb.html">bbb文件</a>
<a href="aaa/ccc.rar">aaa文件夹下的ccc,下载</a>
<a href="###">点击不动</a>
2:图片,行内
<img src="tu.png"> 同目录下,简写
<img src="./tu.png"> 同目录下,全称
<img src="aaa/tu.png"> ***下级目录,常用
<img src="../tu.png"> 上级目录
<img src="../aaa/tu.png"> 先上级,再下级目录
<img src="/tu.png"> 根目录
3:换行:行内
<br>
4:通用块级容器,块级
<div>通用块级容器</div>
5:通用行内容器,行内
<span>通用行内容器</span>
6:标题
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
7:段落
<p>段落</p>
8:无序列表
<ul>
<li>无序列表1</li>
<li>无序列表2</li>
<li>无序列表3</li>
</ul>
9:注释
<!--
这是注释
-->
注释不能嵌套
完成一个网页所需最少标签:
<a href="###">baidu</a>
<img src="a.jpg">
<div>块级容器</div>
<span>行内容器</span>
<h1>一级标题</h1>
<p>段落</p>
<ul>
<li>无序列表1</li>
<li>无序列表2</li>
<li>无序列表3</li>
</ul>
-------------------------------------
六 HTML元素传统分类:
块级元素:div,h1,p,ul,li
一般情况:多个块级元素或块级和行内元素 并列,会自动换行
行内(内联)元素
多个行内元素,不换行
a,img,br,span
还可以分为:
语义性标签:a,img,h1,p,ul,li
非语义性标签:br,div,span
七 网页结构分析:
网页是三维结构
代码内用标签嵌套表示层级
八 HTML的语义性:
基本要求:HTML代码的基本结构要正确
高级要求:尽量使用语义性标签,找不到语义性标签再使用非语义性标签
网页使用什么标签
要看这个HTML模块到底是什么
而不是看这个模块像什么
HTML书写
理想状态:100%追求网页的语义性
现实情况:网页的语义程度受限于成本,不能追求无限的语义性
在基本语义实现的情况下,选写最少最快的那种
九 HTML语义性和效率实现均衡:
例子:网站logo
效率:
<a href="###"><img src="logo.gif"></a>
语义性:
<h1>百度</h1>
css:
h1 宽高
logo作为背景图
text-indent:-9999px 缩进
------------------------------------
十 HTML常用属性:HTML元素节点的钩子
id:id名
class:类名
相同:都用来标识元素
不同:
id名,值是唯一的
在同一个网页中,相同名字的id只能有1个
一个id名,只能有1个值
class类名,值不唯一
在同一个网页中,相同名字的class可以有多个
一个class类名,可以有多个值,空格分隔
注意:id和class命名规范:
1:不能以数字开头
2:命名尽量有语义性
3:一般来说:整体大块模块一般用id,小块用class
<div id="a1">11111111</div>
<div class="b2 cc d3">2222222</div>
<h2 class="b2">333333</h2>
----------------------------------------
十一 关于标签嵌套:
块级元素内部可以嵌套其他块级元素和行内元素
行内元素内部只能嵌套其他行内元素
特例:p标签是块级,但p标签内只能嵌套行内元素,举例
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
html基本基础的更多相关文章
- java基础集合经典训练题
第一题:要求产生10个随机的字符串,每一个字符串互相不重复,每一个字符串中组成的字符(a-zA-Z0-9)也不相同,每个字符串长度为10; 分析:*1.看到这个题目,或许你脑海中会想到很多方法,比如判 ...
- node-webkit 环境搭建与基础demo
首先去github上面下载(地址),具体更具自己的系统,我的是windows,这里只给出windows的做法 下载windows x64版本 下载之后解压,得到以下东西 为了方便,我们直接在这个目录中 ...
- js学习笔记:webpack基础入门(一)
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- Golang, 以17个简短代码片段,切底弄懂 channel 基础
(原创出处为本博客:http://www.cnblogs.com/linguanh/) 前序: 因为打算自己搞个基于Golang的IM服务器,所以复习了下之前一直没怎么使用的协程.管道等高并发编程知识 ...
- [C#] C# 基础回顾 - 匿名方法
C# 基础回顾 - 匿名方法 目录 简介 匿名方法的参数使用范围 委托示例 简介 在 C# 2.0 之前的版本中,我们创建委托的唯一形式 -- 命名方法. 而 C# 2.0 -- 引进了匿名方法,在 ...
- HTTPS 互联网世界的安全基础
近一年公司在努力推进全站的 HTTPS 化,作为负责应用系统的我们,在配合这个趋势的过程中,顺便也就想去搞清楚 HTTP 后面的这个 S 到底是个什么含义?有什么作用?带来了哪些影响?毕竟以前也就只是 ...
- Swift与C#的基础语法比较
背景: 这两天不小心看了一下Swift的基础语法,感觉既然看了,还是写一下笔记,留个痕迹~ 总体而言,感觉Swift是一种前后端多种语言混合的产物~~~ 做为一名.NET阵营人士,少少多多总喜欢通过对 ...
- .NetCore MVC中的路由(1)路由配置基础
.NetCore MVC中的路由(1)路由配置基础 0x00 路由在MVC中起到的作用 前段时间一直忙于别的事情,终于搞定了继续学习.NetCore.这次学习的主题是MVC中的路由.路由是所有MVC框 ...
- .NET基础拾遗(5)多线程开发基础
Index : (1)类型语法.内存管理和垃圾回收基础 (2)面向对象的实现和异常的处理基础 (3)字符串.集合与流 (4)委托.事件.反射与特性 (5)多线程开发基础 (6)ADO.NET与数据库开 ...
- .NET 基础 一步步 一幕幕[面向对象之方法、方法的重载、方法的重写、方法的递归]
方法.方法的重载.方法的重写.方法的递归 方法: 将一堆代码进行重用的一种机制. 语法: [访问修饰符] 返回类型 <方法名>(参数列表){ 方法主体: } 返回值类型:如果不需要写返回值 ...
随机推荐
- 私人C#笔记
coust 定义常量 string是密封类,所以不能继承它 namespace默认是按照文件夹的结构命名的,如(System.文件夹.子文件夹),而且namespace是可以手动改的 Arra ...
- GDI+(Graphics Device Interface)
1创建画布(创建Graphics对象) Bitmap bitmap = new Bitmap(80,80); Graphics g=Graphics.FromImage(bitmap); 2创建Pen ...
- silverlight 打印
加引用: using System.Windows.Printing; xaml文件里: //定义图片和文本打印变量 PrintDocument printImage; public BeginCo ...
- C/C++中的虚析构函数和私有析构函数的使用
代码: #include <iostream> using namespace std; class A{ public: A(){ cout<<"construct ...
- libtcmalloc 简单使用
下载地址: https://github.com/gperftools/gperftools这个编译很简单,直接进入vsprojects\libtcmalloc_minimal,用vc编译即可,整个过 ...
- phpMyAdmin中mysql的创建数据库时的编码的问题
转载自新浪博客 Sean 一. mysql中utf8编码的utf8_bin,utf8_general_cs,utf8_general_ci的区别 utf8_general_ci 不区分大小写,这 ...
- 自定义View—颜色
一.颜色通道的意思 ARGB888.ARGB444.RGB565.Alpha8的区别 二.如何自定义颜色 ①.首先ARGB分别表示
- Android新建项目手动添加Layout布局
前言: 这是看<第一行代码>学习到的第一章,之前使用Eclipse创建Android项目都是自动生成MainActivity.java文件和layout文件夹下的activity_main ...
- a标签# 和javascript:;的区别
最近遇到一个问题,解决了记录下来. <body style="height:10000px;"> <span style="top:3000px;pos ...
- Java中读取文件
Java中读取文件,去除一些分隔符,保存在多维数组里面 public void readFile(String filePath) { File file=new File(filePath); Ar ...