HTML之基础知识开篇
2017-05-15 本文已影响9人
莫失丿莫忘
1.HTML简介：
HTML是英语HyperText Markup Language的缩写，超文本标记语言。超文本：通过标签对儿（一对标签称为标记），描述文档语义语言。
空白折叠现象：
HTML中所有的文字之间，如果有空格、换行、tab都将被折叠为一个空格显示在浏览器中。
纯文本文件：
- 只有文本，没有样式；
- 用记事本等纯文本编辑器可读，不是乱码的（html、css、js都是纯本文的）。
HTML、CSS、JS的用途 ：
- html就是负责描述页面的语义；
就是网页制作者放在页面上想要让用户浏览的信息，直观想要表达的东西可以包含文字、图片、视频等。 - css负责描述页面的样式；
就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。 - js负责描述页面的动态效果的。
鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。
总结：比如：html是人的五官，你需要定义哪里是眼睛那里是鼻子，那么CSS就相当于美容，你可以修饰眼睛画眼影啊，给鼻子打高光呀，看起来更加美观。JS就相当于你要睁眼还是闭眼，你要用嘴巴说话还是唱歌，相当于给她一个动作。
1.1HTML文件的基本结构：
<html>
<head>...</head>
<body>...</body>
</html>
- <html></html>称为根标签，所有的网页标签都在<html></html>中。
- <head> 标签用于定义文档的头部，它是所有头部元素的容器。头部元素有<title>、<script>、 <style>、<link>、 <meta>等标签。
- 在<body>和</body>标签之间的内容是网页的主要内容,body中的内容，才是用户可以看见的内容。如
<h1>、<p>、<a>、<img>等网页内容标签，在这里的标签中的内容会在浏览器中显示出来。
1.2HTML基本标签：
html的等级分为：
- 容器级标签：里面可以放置任何东西(h是容器级，但一般不再嵌套）
- 文本级标签：只能放置文字、图片、表单元素如 p、a
文本级：p、span、a、b、i、u、em
容器级：div、h系列、li、dt、dd
div标签:
div的语义是division“分割”负责布局，负责结构，负责分块；
p标签:
<p>段落文本</p>
<hx>标签:
用来段落的标题,h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。h1是最高的等级
a标签:
<a href="要跳转到的页面.html" title="鼠标放在链接上面会显示的悬停文本” target="_blank>跳转的文字链接</a>
target="_blank使用会跳出一个新的标题栏界面
a是英语anchor“锚”的意思，就好像这个页面往另一个页面扔出了一个锚,能够链接跳转，href是英语hypertext reference超文本地址的缩写。读作“喝瑞夫”。
img标签:
图片地址： - 相对路径：图片相对于.html的位置，上一级就../上两级就../../
- 绝对路径：图片在电脑上的存储位置)
能够插入的图片类型是：jpg(jpeg)、gif、png、bmp
src：标识图像的位置；
alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；
title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；
span标签：
- span的语义就是span“范围、跨度”。
- span是文本级标签里面只能放置文字、图片、表单元素。不能放p、h、ul、dl、ol、div。
- <span>标签是没有语义的，它的作用就是为了设置单独的样式用的，圈出部分，然后用css设置样式，做特殊处理。
例：
Image.png
[站外图片上传中……(2)]
解析：
../表示上一级文件夹，现在document是最大的文件夹，里面有两个文件夹work和photo。work中又有一个文件夹叫做myweb。myweb文件夹里是index.html。所以index.html在myweb文件夹里面，上一级就是work文件夹，上两级就是document文件夹。找到document，才能通过document文件夹当做一个中转站，进入photo文件夹，看到了1.png。
列表（ul、ol、dl）标签： - 无序列表(ul)：
ul就是英语unordered list，“无序列表”的意思。
li 就是英语list item ， “列表项”的意思。
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
li不能单独存在，必须包裹在ul里面，但是ul的“儿子”不能是别的东西，只能有li，而 li里面可以包裹其他的标签
- 有序列表(ol)：
ordered list 有序列表，用ol表示
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
浏览器的显示列表会自动增加阿拉伯序号1,2,3,4.....
- 定义列表(dl)：
dl表示definition list 定义列表
dt表示definition title 定义标题
dd表示definition description 定义表述内容
dt、dd只能在dl里面；dl里面只能有dt、dd
京东下方案例：
<dl>
<dt>购物指南</dt>
<dd>
<a href="#">购物流程</a>
<a href="#">会员介绍</a>
<a href="#">生活旅行</a>
<a href="#">常见问题</a>
<a href="#">团购</a>
<a href="#">联系客服</a>
</dd>
</dl>
结果：
用什么标签，不是根据样子来决定，而是语义。
表单涉及的标签
表单就是收集用户信息的，就是让用户填写的、选择的。（如注册界面）
表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。
<form method="传送方式" action="服务器文件">
- input标签
<input type="text" value="在文本框里输入的默认的值" /> 文本框
<input type="password" /> 密码框
<input type="radio"> 单选按钮
<input type="checkbox" /> 复选框
- 下拉列表
select就是“选择”，option“选项”。
<select>
<option>北京</option>
<option>河北</option>
<option>河南</option>
<option>山东</option>
<option>山西</option>
<option>湖北</option>
<option>安徽</option>
</select>
- 多行文本框
<textarea cols="30" rows="10"></textarea>
文本域 textarea；
cols(columns):列 ；
rows：行
按钮（三种)
- 普通按钮：
<input type="button" value="我是一个普通按钮" /> - 提交按钮：
<input type="submit" />
点击按钮，这个表单就会被提交到form标签的action属性中的那个页面中去。```
- 重置按钮（复位，数据全部刷新，重新填写）：
`<input type="reset" />`
- lable标签:
`<input type="radio" name="sex" id="nan" /> <label for="nan">男</label>`
```input元素要有一个id，然后label标签就有一个for属性，和id相同，就表示绑定了，这个label和input就有绑定关系了。用于绑定文字当点击男的文字时，会选中该单选框。```
###2.头文件声明：
head标签中，描述网页的配置：
<!DOCTYPE ……>：文档声明头，DocType Declaration（DTD），告知浏览器使用哪种规范。
HTML4.01这个版本，这个版本是IE6开始兼容的。HTML5是IE9开始兼容手机移动端网页。h5中简化了DTD,没有XHTML了。
<!DOCTYPE html>
###3.head标签：
head{
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 字符集的配置
<meta name="搜索该网页的关键字Keywords" content="关键字的内容，你要找的什么" />
<meta name="描述内容Description" content="页面描述”/>
<title>网页的标题</title> 可以显示在浏览器的标签栏中的网页的标题。
}
#####3.1meta:元配置:
字符集（charest）字库:
- UTF-8：国际通用字库
- gb2312（gbk）：中国的字库 ，仅涵盖了汉字和一些常用外文
