html和css入门 （一）
HTML简介
什么是HTML
HTML 的全称为 超文本标记语言（Hyper Text Markup Language），这种语言给我们提供一种建立结构性文档的方法。通过表示结构性的标签语法，我们可以创建包含标题，段落，列表，图片以及其他内容的文档。简而言之，HTML语法是用来描述文档内容的。
HTML发展历程
HTML文档结构
要创建一个HTML文档，最简单的方法是创建一个文本文件，然后将其扩展名保存成.html。
组成文档结构的元素只有4个，这也是任何HTML文档都必须有的元素。
<!DOCTYPE html>
<html lang="en">
<head>
<title>首页</title>
</head>
<body>
<p>My cat is very grumpy</p>
</body>
</html>
HTML元素
- 开始标签（Opening tag）：开始标签有标签名和尖括号组成。
- 闭合标签（Closing tag）：闭合标签在标签名之前多了一个斜线（/）。
- 内容（Content）：元素的内容。
- 元素（Element）：由开始标签、闭合标签以及标签之间的内容组成。
空元素
并不是所有的元素都由开始标签、内容、闭合标签3部分组成，有些元素只有一个单标签，这些元素通常用来在文档中插入一些东西，比如：元素会在页面上嵌入一张图片。
<img src="./images/imgdemo.jpg">
HTML 属性
元素可以用属性进行配置。属性由属性名和属性值组成，例如：
- 属性总是写在开始标签中。
- 属性名和元素名之间要有一个空格。
- 属性名后面要跟一个等号（=）。
- 属性值使用双引号或单引号括起来。如果属性值本身含有引号，那两种引号都要用到。
- 一个元素可以有多个属性，这些属性之间以空格分隔。
常用的元素
| 标签 | 描述 |
|---|---|
<h1>~<h6> |
定义标题 |
<p> |
定义段落 |
<br> |
换行 |
<pre> |
定义预先格式化的文本。 |
<hr> |
水平线 |
<b> |
定义粗体文本 |
<em> |
定义需要强调的文本 |
<i> |
定义意大利斜体文本 |
<small> |
定义小号文本 |
<strong> |
定义重点文本 |
<ins> |
定义插入的文本 |
<del> |
定义删除的文本 |
<mark> |
定义标记或需要高亮显示的文本 |
<div> |
定义块级区域，作为其他HTML元素的容器，通常用于页面布局。 |
<span> |
定义行内区域，作为一些文本的容器，用于控制文本的样式。 |
<img> |
|
<a> |
注释
<!-- <p>My cat is very grumpy</p> -->
链接
- 页面之间的链接
假如我们写了A、B两个页面，那么怎样让这两个页面关联起来呢？这个时候就需要使用超链接了。
<a href="B.html">跳转到B页面</a>
它有如下两个重要属性：
- href：指定要链接到哪个页面或哪个位置
- target：指定如何显示页面，该属性有
_self、_blank
- 锚链接
定义锚点其实就是在页面中创建一个定位点，当我们想要在其他地方跳转到这个定位点时，只需要创建一个定位到这个定位点的锚链接，就可以直接跳转到该定位点，这样就不需要通过鼠标滚动页面来寻找我 们需要的信息了。
首先，在 HTML 文档中定义一个锚点（也就是一个定位点），使用id属性定义锚点：
<p id="tips">My cat is very grumpy</p>
然后，我们在同一个文档中创建指向该锚点链接：
<a href="#tips">有用的提示</a>
也可以在其他页面中创建指向该锚点的链接：
<a href="B.html#tips">有用的提示</a>
我们只需要将 # 符号和锚点的名称添加到 URL 的末尾，就可以链接到 tips 这个锚点了。
图片
code><img>元素用于在页面中嵌入图像，该元素是一个空元素。
必要属性：
- src：该属性指定图片文件所在的位置，可以是相对路径，也可以是绝对路径。
- alt：该属性指定一段文本，用来作为该图片的提示信息。
可选属性：
- height：指定图片的高度，属性值可以是百分比，也可以是像素值。
- width：指定图片的宽度，属性值可以是百分比，也可以是像素值。
元素的分类
根据HTML元素的默认显示方式，可将元素分为块级元素(block)和行内元素（inline）。
1：块级元素
块级元素总是另起一行，并且独占一行。行内元素不能嵌套块状元素，但它可以被嵌套在另一个块状元素内。例如：<div>，<ul>，<h1>~<h6>，<p>等元素。
2、行内元素
行内元素是那些包含在块级元素内部，并且只包含小部分文档内容的元素。行内元素不会另起一行，通常出现在一小段文本中，例如<a>元素，<em>元素或<strong>元素。
使用特殊字符
实体是浏览器用来替代特殊字符的一种编码，下表中列出了网页中常用的一些特殊字符。
最常用的字符实体
| 显示结果 | 描述 | 实体名称 | 实体编号 |
|---|---|---|---|
| 空格 | |
|
|
< |
小于号 | < |
< |
> |
大于号 | > |
> |
& |
和号 | & |
& |
" |
引号 | " |
" |
' |
撇号 | ' |
' |
€ |
欧元符号 | € |
€ |
￠ |
分 | ¢ |
¢ |
£ |
镑 | £ |
£ |
¥ |
日圆 | ¥ |
¥ |
§ |
节 | § |
§ |
© |
版权 | © |
© |
® |
注册商标 | ® |
® |
™ |
商标符号 | ™ |
™ |
× |
乘号 | × |
× |
÷ |
除号 | ÷ |
÷ |
每个特殊字符都有一个实体编号，可以用来在文档内容中代表该字符。例如，字符"&"的实体编号是。特别常用的特殊字符还有对应的实体名称。例如，"&"的实体名称是&，对于浏览器来说，和&是一回事，都代表”&”。
特别声明：本人也是小白，想让与我一样的初学者一起学习，写的不好的地方请见谅
html和css入门 （一）的更多相关文章
- [HeadFist-HTMLCSS学习笔记][第七章CSS入门：加一点样式]
CSS入门 style元素设置CSS 基本格式 <style type="text/css"> body { background-color: #eaf3da; } ...
- CSS入门教程——定位(positon)
CSS入门教程——定位(positon) CSS定位在网页布局中是起着决定性作用. 定位 CSS的定位功能是很强大的,利用它你可以做出各种各样的网页布局.本节就介绍一些CSS常用的定位语句. 1. ...
- 第六十九节，css入门基础
css入门基础 学习要点: 1.使用CSS 2.三种方式 3.层叠和继承 本章主要探讨HTML5中CSS (层叠样式表),它是用来对HTML文档外观的表现形式进行排版和格式化. 一 使用CSS CSS ...
- css入门二-常用样式
css入门二-常用样式总结 基本标签样式 背景色background-color 高度height; 宽度width; 边框对齐以及详细设定举例 width/*宽度*/: 80%; height/*高 ...
- 胖虎都看得懂的CSS入门
CSS入门 CSS是什么 摘自维基百科 层叠样式表(英语:Cascading Style Sheets,简写CSS),又称串样式列表.级联样式表.串接样式表.层叠样式表.階層式樣式表,一种用来为结构化 ...
- 【Python全栈-CSS】CSS入门
CSS入门教程 参考: http://www.cnblogs.com/yuanchenqi/articles/5977825.html http://www.ruanyifeng.com/blog/2 ...
- day 31 html(二) 和css入门
前情提要: 本次主要是继续昨天学的简单的html 补充以及 css的简单入门 一:表单标签 >1:get请求 <!DOCTYPE html> <html lang=" ...
- HTML与CSS入门经典(第9版)试读 附随书源码 pdf扫描版
HTML与CSS入门经典(第9版)是经典畅销图书<HTML与CSS入门经典>的最新版本,与过去的版本相同,本书采用直观.循序渐进的方法,为读者讲解使用HTML5与CSS3设计.创建并维护世 ...
- css入门知识点整理
css入门知识点整理 不要嘲笑我这个蒟蒻..例子来源:w3school css其实就分为两个东西,一个是选择器,另外一个是声明.声明定义了某个对象的属性的值,这都是html的内容.重点要关注的是选择器 ...
- H5教程（二），CSS入门（一）选择器
这是我的第二篇博客,H5教程CSS入门,适合刚开始学习H5的新手,让我们共同进步. 1. CSS简介 1.1 CSS是什么? CSS称为样式层叠表,是用于增强或控制网页样式,并允许将样式信息与网页 ...
随机推荐
- Jsp入门实战上
前面讲了servlet入门实践现在开始介绍jsp入门实践,开发环境的搭建请参考我前面的tomcat的文章,jsp入门教程分为上下两部分,第一部分简单讲解:jsp语法的规范,以及三大编译指令,七个动作指 ...
- Java线程池学习心得
一.普通线程和线程池的对比 new Thread的弊端如下: a. 每次new Thread新建对象性能差.b. 线程缺乏统一管理,可能无限制新建线程,相互之间竞争,及可能占用过多系统资源导致死机或o ...
- 对drf视图集的理解
视图集ViewSet 使用视图集ViewSet,可以将一系列逻辑相关的动作放到一个类中: list() 提供一组数据 retrieve() 提供单个数据 create() 创建数据 update() ...
- 2016级算法第六次上机-C.AlvinZH的学霸养成记II
1032 AlvinZH的学霸养成记II 思路 中等题,贪心. 所有课程按照DDL的大小来排序. 维护一个当前时间curTime,初始为0. 遍历课程,curTime加上此课程持续时间d,如果这时cu ...
- Linux磁盘分区、挂在
分区基础知识分区的方式:1) mbr分区:1.最多支持四个主分区2.系统只能安装在主分区3.扩展分区要占一个主分区4.MBR最大只支持2TB,但拥有最好的兼容性2) gtp分区:1.支持无限多个主分区 ...
- linux下启动tomcat服务的命令是什么
Linux下tomcat服务的启动.关闭与错误跟踪,使用PuTTy远程连接到服务器以后,通常通过以下几种方式启动关闭tomcat服务:切换到tomcat主目录下的bin目录(cd usr/local/ ...
- Django环境搭建之hello world
当我们想用Python来开发一个web应用时,首先要选择一个优秀的web框架,Django是个非常成熟的web开发框架,网上具有丰富的文档和学习资料,所以选择Django框架来入门web开发是个不错的 ...
- （JAVA作业）练习：创建一个类名为Fruit;包含实例变量：水果名称，颜色，价格，上市月份，有无种子 10个实例：苹果，香蕉，芭乐，柚子，李子，杨桃，猕猴桃，哈密瓜，葡萄，榴莲； 实现功能：提示用户输入水果品种编号，输出该水果的全部信息。
class Lei { String name; String color; int price; int date; int num; String zz; void assemble(){ Sys ...
- （二）Audio子系统之new AudioRecord()
在上一篇文章<(一)Audio子系统之AudioRecord.getMinBufferSize>中已经介绍了AudioRecord如何获取最小缓冲区大小,接下来,继续分析AudioReco ...
- Linux快速查看某条命令的版本和存放的位置（ls -l `which mvn`）
输入: ls -l `which mvn` 如图: