HTML概述
1、什么是HTML
HTML 指的是超⽂本标记语⾔ (Hyper Text Markup Language)
HTML 不是⼀种编程语⾔，⽽是⼀种标记语⾔ (markup language)
标记语⾔是⼀套标记标签 (markup tag)
HTML 使⽤标记标签来描述⽹页
2、基础语法：
1、标记语法
2、元素
3、元素嵌套
4、属性和值
5、注释
HTML⽂档结构
1、结构标记
<html> 与 </html> 之间的⽂本描述⽹页
<body> 与 </body> 之间的⽂本是可见的页⾯内容
<h1> 与 </h1> 之间的⽂本被显⽰为标题
<p> 与 </p> 之间的⽂本被显⽰为段落
<!DOCTYPE HTML>
<html>
<head>
<title>第⼀个 HTML ⽂档</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="keywords" content="HTML,CSS,JS" />
</head>
<body>
<p title="标准结构的HTML⽂档">我的第⼀个⽂档</p>
</body>
</html>
1、⾏内元素和块级元素的区别
块级元素的前后都会⾃动换⾏，如同存在换⾏符⼀样。默认情况下，块级元素会独占⼀⾏。例如，<p>、<hn>、<div> 都是块级元素。在显⽰这些元素中间的⽂本时，都将从新⾏内元素可以和其他⾏内元素位于同⼀⾏，在浏览器中显⽰时不会换⾏。例如，<a>、<span> 等。
我们可以这样理解：如果元素是块级的，则总是在新⾏上显⽰，好⽐是书中的⼀个新段落；⽽元素如
果是⾏内的，那么只能在当前⾏中显⽰，就像是段落中的⼀个单词。
因此，块级元素常⽤来构建⽹页上⽐较⼤的结构，⽤于包含其他块级元素、⾏内元素和⽂本；⽽⾏内元素⼀般只能包含其他⾏内元素和⽂本。
2、常⽤的⽂本标记有：
⽂本样式标记：如 <b>、<i>、<u>、<s>、<sup>、<sub>等，这些元素⽤来指定⽂本的外观，分别为：粗体、斜体、下划线、删除线、上标和下标。⼀般不太建议使⽤这些元标题元素<hn>：标题元素让⽂字以醒⽬的⽅式显⽰，往往⽤于⽂章的标题，有6级标题，<h1>、<h2>、<h3>、<h4>、<h5>和 <h6>。
段落元素<p>：⽤于表⽰⼀段⽂本，⾃成⼀个段落。
换⾏元素<br>：当使⽤ <br> 元素时，它后⾯跟随的内容将从下⼀⾏开始显⽰。
分区元素<span>和<div>：分区元素⽤于为元素分组，常⽤于页⾯布局。
分隔线元素 <hr>：<hr> 元素⽤于在页⾯上创建⼀条⽔平线，常⽤于将页⾯的不同部分隔开。
预格式化<pre>：保留源⽂档中的格式，即保留原来的换⾏和⽂本中的空⽩
2、表单
1/作⽤：⽤于收集、显⽰⽤户的信息并提交给服务器
2/表单组成：
表单元素：
1、语法：
<form></form>  不能省略
2、属性
1、action  服务器处理程序地址
2、method  提交⽅式
1、get默认值，显⽰提交，长度限制2KB（IE）。向服务器索取数据
2、post ，安全隐式提交，⽆长度限制。⼀般准备数据提交后服务器处理再交付
3、enctype  什么样的数据可以被提交
1、application/x-www-form-urlencoded  默认值特殊字符等都可以被提交
2、multipart/form-data    上传⽂件时使⽤
3、text/plain    只能将普通的数据提交（有些少数框架中，可能会使⽤）
4、name  定义整个表单的名称（不是必要）
表单控件：
1、input  组-输⼊字段
1、语法：<input></input>
2、属性：type 区分不同的输⼊字段如果不写或写，那么都将是text
name 当前控件的名称，服务器⽤，（不能省略）命名规范：匈⽛利命名法：由缩写+功能组合
value 控件的值，服务器⽤
disabled  禁⽤控件
3、所有控件：
1、⽂本框和密码框
⽂本框：type="text"
密码框：type="password"
属性：  1、maxlength限制输⼊的字符数
2、readonly  只读
2、单选按钮和复选框
单选：type="radio"
复选：type="checkbox"
htmlbutton属性属性：1、name分组单选：⼀组中只能有⼀个被选中
复选：以相同的名称来获取⼀组勾选的数据
2、checked：预选中
3、按钮组
提交：type="submit"
重置：type="reset"
普通：type="button"
按钮：<button>⽂本</button>  放在form⾥就是提交，放在外⾯就是按钮。
属性：
value
4、隐藏域和⽂件选择框
隐藏域：type="hidden"
⽂件选择：type="file"
⽂件选择框: 1、methpd 必须为post  2、enctype必须为multipart…………
2、textarea
多⾏⽂本域
1、语法
<textarea></textarea>
2、属性
1、name 名称
2、cols ⽂本区域的列数，变相的设置宽度
3、rows ⽂本区域的⾏数，变相的设置⾼度
4、readonly
3、select 和 option  选项框
下拉选项框
滚动列表
1、语法<select></select>
属性：1、name  名称  2、size  默认显⽰⼏项，如果⼤于1的话则为滚动列表
3、multiple 多选
<option></option>
属性：1、value 选项的值
2、selected 预选中
3、其他常⽤标记
1、浮动框架：作⽤：再⼀个浏览器页⾯中显⽰多个html⽂档内容
语法<iframe src="">⽂本</iframe>
注意：强烈不推荐使⽤
属性：src引⼊浮动框架的url  width    height  frameborder设置为0则不表⽰边框        2、摘要与细节<details>
<summary></summary>
</details>
3、度量元素
<meter>⽂本</meter>
属性
1、min度量范围的最⼩值，默认为0
2、max 最⼤值默认为1
3、value 当前显⽰的值
4、时间元素
<time>⽂本</time>  关联时间的不同表⽰⽅式
属性：datetime 关联的⽇期与时间，⽇期与时间⽤T分割
5、⾼亮显⽰ <mark></mark>
CSS
1、CSS概述
1、问题
1、相同的效果⽤不同的属性
<body text="blue"></body> <font color="red"></font>
2、可维护性和可重⽤性不⾼
2、CSS
1、什么是CSS
Cascading Style Sheets层叠样式表、级联样式表、样式表
2、作⽤1、实现内容与样式相分离2、提⾼代码的可重⽤性和可维护性
3、CSS与HTML之间的关系
HTML：⼈搭建⽹页结构      CSS：⾐服装扮构建⽹页样⼦
4、CSS与html的使⽤原则：尽量使⽤CSS属性取代html属性

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。