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>

时间: 2024-10-04 09:19:47

html基本基础的相关文章

java web 开发三剑客 -------电子书

Internet,人们通常称为因特网,是当今世界上覆盖面最大和应用最广泛的网络.根据英语构词法,Internet是Inter + net,Inter-作为前缀在英语中表示“在一起,交互”,由此可知Internet的目的是让各个net交互.所以,Internet实质上是将世界上各个国家.各个网络运营商的多个网络相互连接构成的一个全球范围内的统一网,使各个网络之间能够相互到达.各个国家和运营商构建网络采用的底层技术和实现可能各不相同,但只要采用统一的上层协议(TCP/IP)就可以通过Internet

Java注解(1)-注解基础

注解(Annotation)是在JAVA5中开始引入的,它为在代码中添加信息提供了一种新的方式.注解在一定程度上把元数据与源代码文件结合在一起,正如许多成熟的框架(Spring)所做的那样.那么,注解到底可以做什么呢? 1.注解的作用. 提供用来完整地描述程序所需要的信息,如编译期校验程序信息. 生成描述符文件,或生成新类的定义. 减轻编写"样板"代码(配置文件)的负担,可以使用注解自动生成. 更加干净易读的代码. 编译期类型检查. 2.Java提供的注解 Java5内置了一些原生的注

MySQL数据库基础知识

day02 MySQL数据库基础知识 一.基础知识概述: 基础决定你这门课程的学习成败!只有学习好这些基础知识以后,你才能真正的运用自如.才能够对数据库有更深入的了解,道路才会越走越远. 二.基础知识: 1.数据库(database):数据库就好比是一个物理的文档柜,一个容器,把我们整理好的数据表等等归纳起来. 创建数据库命令:        create database 数据库名; 2.查看数据库         show databases; 3.打开指定的数据库         use 

【Linux系列】【基础版】第四章 Shell基础之正则表达式

4. Shell基础之正则表达式     4.1 正则就是一串有规律的字符串         4.1 grep              4.1.1 格式: grep [-cinrvABC] 'word' filename             4.1.2 -c //count,表示行数             4.1.3 -i //不区分大小写             4.1.4 -n  //显示行号             4.1.5 -r  //遍历所有子目录             4

NumPy基础:数组和失量计算

NumPy : Numerical Python,是高性能科学计算和数据分析的基础包. 部分功能: ndarray:一个具有矢量算术运算和复杂广播能力的快速且节省空间的多维数组: 用于对整组数据进行快速运算的标准数学函数(无需编写循环): 用于读写磁盘数据的工具以及用于操作内存映射文件的工具: 线性代数.随机数生成以及傅里叶变换功能: 用于集成C.C++.Fortran等语言编写的代码工具: 大部分数据分析应用关注的功能: 用于

css基础

css绝对是一个能够写到爆炸的东西,so,机智的小北方才不会写各种css样式具体的效果,相比之下更推荐大家记一些常用的key,至于效果,每次用的时候百度下就可以了, css的作用是对符合条件的标签进行渲染,那么首先就要匹配到对应标签啦,我萌有三种基础的模式来匹配希望改变样式的标签 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8">

零基础的人该怎么学习JAVA

对于JAVA有所兴趣但又是零基础的人,该如何学习JAVA呢?对于想要学习开发技术的学子来说找到一个合适自己的培训机构是非常难的事情,在选择的过程中总是 因为这样或那样的问题让你犹豫不决,阻碍你前进的步伐,今天就让小编为您推荐培训机构新起之秀--乐橙谷Java培训机构,助力你成就好未来. 选择java培训就到乐橙谷 北京有什么好的Java培训机构?来乐橙谷北京学Java,零基础走起,乐橙谷Java基础班授课老师经验非常丰富,课程内容安排合理,适合于有一点点Java基础甚至一点都不会Java的同学学

linux+jmeter+python基础+抓包拦截

LINUX 一 配置jdk 环境 *需要获取root权限,或者切换为root用户 1.windows下载好,去 http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 官方网站下载jdk(linux相应版本) 2.在usr目录下创建java路径文件夹 [root bin]cd /usr mkdir java 3.将jdk-8u60-linux-x64.tar.gz放到刚才创建的文件夹下

python基础之条件循环语句

前两篇说的是数据类型和数据运算,本篇来讲讲条件语句和循环语句. 0x00. 条件语句 条件语句是通过一条或多条语句的执行结果(True或者False)来决定执行的代码块. 可以通过下图来简单了解条件语句的执行过程: Python interprets non-zero values as True. None and 0 are interpreted as False. Python 判断非0的值为 True, 而None和0被认为是 False.注意这里的True和False首字母大写,Py

【转】Java基础知识总结

写代码: 1,明确需求.我要做什么? 2,分析思路.我要怎么做?1,2,3. 3,确定步骤.每一个思路部分用到哪些语句,方法,和对象. 4,代码实现.用具体的java语言代码把思路体现出来. 学习新技术的四点: 1,该技术是什么? 2,该技术有什么特点(使用注意): 3,该技术怎么使用.demo 4,该技术什么时候用?test. ------------------------------------------------------------------------------------