HTML简学1

一.简介

HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

二.元素

HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。

三.注释

<!-- 注释 -->

三.文本标签

1.标题标签

<h1> - <h6> 从大到小标记标题
几乎所有的标签都有start tag 和 end tag
如:<h1>一级标题</h2>

2.段落标签

1. 浏览器会自动地在段落的前后添加空行。（

   是块级元素）

<p>
    文本内容
</p>

3. 水平分割线

<hr>

4. 换行标签

<br/>

5.文本格式化标签

标签	描述
< b>	定义粗体文本。
< big>	定义大号字。
< em>	定义着重文字。
< i>	定义斜体字。
< small>	定义小号字。
< strong>	定义加重语气。
< sub>	定义下标字。
< sup>	定义上标字。
< ins>	定义插入字。
< del>	定义删除字。

6. 滚动标签

<marquee>
	内容
</marquee>

7.原样输出标签

<pre>
	内容
</pre>

8.上下标标签

上标
<sup></sup>
下标
<sub></sub>

9.版权及商标标签

&copy 转义成©
&reg  转义成®

四、超链接标签

1. 应用
   • 跳转页面
   • 锚链接（本页面点击跳转）

格式：
<a href=""></a>

<!-- 
    属性：
    target：打开资源地址方式
    默认方式：_self(当前窗口打开新地址)
    _blank:新建一个窗口打开
-->

五、常见转义字符

&nbsp 不断行的空格
&ensp 半角空格
&emsp 全角空格
&lt 小于<
&gt 大于>
&amp &符号
&quot 双引号"
&copy 版权符号©
&reg 已注册商标®
&trade 商标（美国）TM
&times 乘号×
&divide 除号÷

六、图片标签

<img>

七、框架

1. 通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。

2. 框架与框架集（框架集又称框架结构）

   • 框架标签frame 定义放置在每个框架中的HTML文档
   • 框架集标签franmeset 定义如何将窗口分割为框架，其属性rows/cols的值分别规定每行和每列的占屏幕的面积。

3. 框架标签frame

   cols：分列  
   rows: 分行 后面为各列占比，用 ，号隔开
   <frameset cols="25%,75%">
      <frame src="frame_a.htm">
      <frame src="frame_b.htm">
   </frameset>
   
   设置了一个两列的框架集。第一列被设置为占据浏览器窗口的 25%。第二列被设置为占据浏览器窗口的 75%。HTML 文档 "frame_a.htm" 被置于第一个列中，而 HTML 文档 "frame_b.htm" 被置于第二个列中
   

八、CSS

1.简介

CSS: cascading Style sheet 层叠样式表

CSS 是一种描述 HTML 文档样式的语言。

CSS 描述应该如何显示 HTML 元素。

2.分类

1. 行内样式
2. 内联样式
3. 外联样式

5.CSS常用选择器

1. 分类
   • 简单选择器
     • 元素（标签）选择器
     • id选择器
     • class选择器等
   • 组合器选择器
   • 伪类选择器
   • 伪元素选择器
   • 属性选择器
2. 优先级：id选择器>class选择器>标签选择器

6.伪类选择器

1. 伪类用于定义元素的特殊状态。

   1. link状态：鼠标未访问状态
   2. hover状态：鼠标经过状态
   3. active状态：鼠标获取焦点状态，激活了但没有松开，如超链接就是这种状态
   4. visited状态：鼠标访问过了状态

2. 注意（重复显示）：

   1. a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效！
   2. a:active 必须在 CSS 定义中的 a:hover 之后才能生效！伪类名称对大小写不敏感。
   3. 顺序：link>visited>hover>active

7.CSS中常用的样式属性

7.1 文本

属性：
1.color
2.textalign 对齐方式
3.text-decoration 属性用于设置或删除文本装饰
	underline：设置下划线
	none：不设置装饰
	overline：上划线
	line-through:中划线
4.text-transform:指定文本中的大写和小写字母，它可用于将所有内容转换为大写或小写字母，或将每个单词的首字母大写
	text-transform: uppercase; 全部大写
	text-transform: lowercase; 全部小写
	text-transform: capitalize; 首字母大写
5.text-indent 文本缩进
6.letter-spacing 属性用于指定文本中字符之间的间距。

7.2边框

1. CSS border 属性指定元素边框的样式、宽度和颜色

设置边框颜色
写法1
border-top: blue;
border-bottom: #000000;
border-left: #8A2BE2;
border-right: #FF0000;

写法2 
border-color: #8A2BE2 #00FFFF #FF0000 aquamarine; 


设置边框宽度 
写法1
border-top-width: 15px;
border-bottom-width: 13px;
border-left-width: 17px;
border-right-width: 10px;

写法2 
border-width: 30px 40px 50px 10px;

设置边框样式
写法1
border-top-style: solid;
border-bottom-style: double;
border-left-style: dashed;
border-right-style: dotted; 
写法2 
border-style: solid dotted groove double; 


上面的写法非常复杂，w3c规定了简写
border-color
border-width
border-style
1.顺序为：上 右 下 左   
2.中间用空格隔开
3.如果某一边没有设置，默认设置为对边颜色/样式

最终简写方法：
border 属性是以下各个边框属性的简写属性：
顺序：
border-width
border-style（必需）
border-color
即：
最终简写 
border: 3px solid blue;

可以只为一个边指定所有单个边框属性：
border-left: 5px solid black;

十、表单标签中的元素

1. input输入类型元素
   1.1 submit
   1.2 text
   1.3 password
   1.4 email
   1.5 radio 单选
   1.6 checkbox 复选框
   1.7 button
2. select 下拉列表元素
3. textarea 文本域元素
4. button 按钮元素
5. option 待选元素

九、表单提交中get和post的区别

1. get提交表单中的内容在链接处是可见的。post不可见
2. post相比于get是安全的
3. post不受限制大小，get有限制大小。但不管怎么提交到服务器中会有提交长度和大小的限制，提交数据不能无限大。