通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）
常用标签介绍 W3Csholl.chm 9.1 、 font 字体标签 font 可以显示文本内容，并且修改文本的字体，和颜色，以及文本大小。 需求 1 ：在网页上显示 我是字体标签 ，并修改字体为 宋体，颜色为红色。 <!-- 字体标签 需求 1：在网页上显示 我是字体标签 ，并修改字体为 宋体，颜色为红色。 font是字体标签，可以定义文本内容。修改文本大小，文本字体，以及颜色 face属性修改文本的字体 size属性修改文本大小 color属性修改文本的颜色 --> < font face = "宋体" size = "8" color = "red" > 我是字体标签 </ font > 9.2 、特殊字符 需求 1 ：把 <br> 换行标签 变成文本 转换成字符显示在页面上 < body > <!-- 特殊字符 <br> 就是换行标签 我们需要使用转义字符（特殊字符） < 特殊字符 < > 特殊字符 > 空格的特殊字符 在 html 中多个连续的空白字符。只会解析成为一个空格 。 --> 1 < br > 2 < br /> 国哥很 帅！ </ body > 9.3 、标题标签 <h1>----<h6> 需求 1 ：演示标题 1 到 标题 6 的 <!-- <h1>----<h6> 需求 1：演示标题1到 标题6的 h1到h6都是标题标签 h1最大 h6最小 align 对齐属性 left 左对齐（默认） center 居中 right 右对齐 --> < h1 align = "left" > 标题 1 </ h1 > < h2 align = "center" > 标题 2 </ h2 > < h3 align = "right" > 标题 3 </ h3 > < h4 > 标题 4 </ h4 > < h5 > 标题 5 </ h5 > < h6 > 标题 6 </ h6 > 9.4 、超链接 （ **** 重 点 ，必 须 掌 握 * ） 需求 1 ：普通的 超连接。 超连接使用 a 标签 <!-- 超链接 需求 1：普通的 超连接。 a 标签是超连接标签 href 属性设置连接的地址。 (默认情况下。在当前页面进行跳转) target属性设置哪个目标（窗口）进行跳转 _self 表示当窗口 (默认） _blank 表示打开新窗口，跳转 --> < a href = "http://www.baidu.com" > 百度（默认） </ a >< br /> < a href = "http://www.baidu.com" target = "_blank" > 百度 (新窗口) </ a > 9.5 、列表标签 需求 1 ：使用无序，列表方式，把东北 F4 ，小沈阳，赵四，刘能，宋小宝。展示出来 无序列表 ul 列表 li 列表项 < body > <!-- 但凡跟浏览器有关的内容。大多数都会有兼容性问题。 需求 1：使用无序，列表方式，把东北F4，小沈阳，赵四，刘能，宋小宝。展示出来 ul 是无序列表 type 可以修改列表项前面的符号 li 是列表项 --> < h1 > 东北 F4 </ h1 > < ul type = "none" > < li > 小沈阳 </ li > < li > 赵四 </ li > < li > 刘能 </ li > < li > 宋小宝 </ li > </ ul > </ body > 9.6 、 img 标签 img 可以显示一张图片。 它有属性，可以修改图片的大小，宽高，设置不同图片的显示 src 属性。还可以设置当图片路径找不到图片的时候。可以用来替代显示的文本内容。 需求 1 ：使用 img 标签显示一张美女的照片。并修改宽高，和边框属性 < body > <!-- 需求 1：使用 img 标签显示一张美女的照片。并修改宽高，和边框属性 img 标签，图像标签，用于显示图片 src 属性 设置需要显示的图片路径 alt 属性 当设置的路径找不到图片的时候，替代显示的文本内容 width属性 设置图片的宽度 height属性 设置图片的高度 border属性 设置边框大小 路径又分为相对路径，和绝对路径： . 表示当前目录 .. 表示上一级目录 绝对路径： D:\\目录\\文件名 在 web中是错误的！ 在 web中的绝对路径必须是:http://ip:port/工程名/资源名 http://192.168.10.168:8080/a/13.jpg --> < img alt = "美女找不到！" src = "./1.jpg" width = "100" height = "120" border = "1" /> < img alt = "美女找不到！" src = "../2.jpg" width = "100" height = "120" border = "1" /> < img alt = "美女找不到！" src = "../imgs/3.jpg" width = "100" height = "120" border = "1" /> < img alt = "美女找不到！" src = "../imgs/4.jpg" width = "100" height = "120" border = "1" /> < img alt = "美女找不到！" src = "../imgs/5.jpg" width = "100" height = "120" border = "1" /> < img alt = "美女找不到！" src = "http://192.168.10.168:8080/a/13.jpg" width = "100" height = "120" border = "1" /> </ body > 9.7 、表格标签（ **** 重点，必须掌握 * ） 需求 1 ：做一个 带表头的 ，三行，三列的表格，并显示边框 需求 2 ：修改表格的宽度，高度，表格的对齐方式，单元格间距。 < body > <!-- 需求 1：做一个 带表头的 ，三行，三列的表格，并显示边框 --> <!-- 需求 2：修改表格的宽度，高度，表格的对齐方式，单元格间距。 --> <!-- table 是表格标签 border 设置表格的边框 width 设置表单的宽度 height 设置表格的调试 cellspacing 设置单元格的间距 cellpadding 设置单元格的内边距 tr 是表格的行 td 是表格的单元格 align 对齐属性 b 标签是加粗标签 center 居中标签 --> < center > < table border = "1" width = "500" height = "500" cellspacing = "0" cellpadding = "10" > < tr > < th > 1.1 </ th > < th > 1.2 </ th > < th > 1.3 </ th > </ tr > < tr > < td > 2.1 </ td > < td > 2.2 </ td > < td > 2.3 </ td > </ tr > < tr > < td > 3.1 </ td > < td > 3.2 </ td > < td > 3.3 </ td > </ tr > </ table > </ center > </ body > 9.8 、跨行跨列表格 （ * 次重点，必须掌握 * ） 需求 1 ：新建一个五行，五列的表格，第一行，第一列的单元格要跨两列，第二行第一列的单元格跨两行，第四行第四列的单元格跨两行两列。 <!-- 需求 1：新建一个五行，五列的表格， 第一行，第一列的单元格要跨两列， 第二行第一列的单元格跨两行， 第四行第四列的单元格跨两行两列。 colspan 设置跨列 rowspan 设置跨行 --> < table border = "1" width = "500" height = "500" cellspacing = "0" > < tr > < td colspan = "2" > 1.1 </ td > < td > 1.3 </ td > < td > 1.4 </ td > < td > 1.5 </ td > </ tr > < tr > < td rowspan = "2" > 2.1 </ td > < td > 2.2 </ td > < td > 2.3 </ td > < td > 2.4 </ td > < td > 2.5 </ td > </ tr > < tr > < td > 3.2 </ td > < td > 3.3 </ td > < td > 3.4 </ td > < td > 3.5 </ td > </ tr > < tr > < td > 4.1 </ td > < td > 4.2 </ td > < td > 4.3 </ td > < td colspan = "2" rowspan = "2" > 4.4 </ td > </ tr > < tr > < td > 5.1 </ td > < td > 5.2 </ td > < td > 5.3 </ td > </ tr > </ table > 9.9 、了解 iframe 框架标签 ( 内嵌窗口 ) iframe 可以在页面上，内嵌一个小窗口可以单独加载一个页面内容。 < body > <!-- 内联框架 单独加载一个页面。 src 设置单独加载的页面地址 ./ 表示当前目录。它可以省略 a标签和 iframe 组合使用他为两个步骤： 1.在需要跳转 iframe 标签中，使用 name属性，起一个名称 2.在a标签的target属性上，设置需要跳转的 iframe 的 name的属性值。 --> < iframe src = "5.img标签.html" width = "500" height = "400" name = "abc" ></ iframe > < br />< br /> < a href = "1.font标签.html" target = "abc" > 1.font标签. html </ a >< br /> < a href = "7.表格跨行跨列.html" target = "abc" > 7.表格跨行跨列. html </ a >< br /> </ body > 9.10 、表单标签 （ ***** 重点 ，必须掌握 * ） 表单：客户端需要向服务器提交业务数据的时候，需要使用的元素。这些内容我们称之为表单。 需求 1: 创建一个个人信息注册的表单界面。包含用户名，密码，确认密码。性别（单选），性趣爱好（多选），国籍（下拉列表）。 隐藏域，自我评价（多行文本域）。重置，提交。 <!-- 表单是form标签 input type=text 表示文本输入框 value属性设置默认值 input type=password 表示密码输入框 input type=radio 单选框 name属性可以分组 checked="checked"表示默认选中 input type= checkbox 复选框 checked="checked"表示默认选中 input type=submit 提交按钮 input type=reset 重置按钮 下拉列表 select option下拉列表中的每一个选项 selected="selected"表示默认选中 多行文本输入框 : textarea rows设置多行文本框的行数（高度）， cols 设置宽度 --> < form action = "http://www.baidu.com" > 用户名： < input type = "text" value = "1234" />< br /> 密码 : < input type = "password" value = "123" />< br /> 性别： < input type = "radio" name = "sex" checked = "checked" /> 男 < input type = "radio" name = "sex" /> 女 < br /> 兴趣爱好： < input type = "checkbox" /> C++ < input type = "checkbox" checked = "checked" /> java < input type = "checkbox" /> cpp < br /> 国籍： < select > < option > --请选择国籍-- </ option > < option selected = "selected" > 中国 </ option > < option > 美国 </ option > < option > 日本 </ option > </ select >< br /> 自我评价： < textarea rows = "10" cols = "30" > 这是默认值 </ textarea >< br /> < input type = "submit" /> < input type = "reset" /> </ form > 提单提交的细节 < body > <!-- form 是表单标签 action 提交的服务器地址 method 提交方式 GET 和 POST 表单提交时，没有提交到服务器的两个常用原因： 1.表单项，没有name属性值。 2.如果表单项，没有在提交的form标签中。是不会被提交到服务器的 GET请求的特点： 1.浏览器地址栏是action属性值?请求的参数（name=value&name=value） 2.请求不安全 3.GET请求有长度限制 （ 1000长度） POST请求的特点： 1.浏览器地址栏只有action的属性值。 2.请求安全 3.没有长度限制（可以提交大量的数据） input type=hidden 是隐藏域，当我们想向服务器发送一些数据。但是这些数据，又不希望用户看见。 --> < input type = "hidden" name = "ad" value = "asdf" /> < form action = "http://127.0.0.1:8080" method = "post" > < table > < tr > < td > 用户名： </ td > < td >< input type = "text" name = "username" value = "1234" /></ td > </ tr > < tr > < td > 密码 : </ td > < td >< input type = "password" name = "password" value = "123" /></ td > </ tr > < tr > < td > 性别 : </ td > < td > < input type = "radio" name = "sex" checked = "checked" value = "boy" /> 男 < input type = "radio" name = "sex" value = "girl" /> 女 </ td > </ tr > < tr > < td > 兴趣爱好： </ td > < td > < input type = "checkbox" name = "hobby" value = "cpp" /> C++ < input type = "checkbox" name = "hobby" checked = "checked" value = "java" /> java < input type = "checkbox" name = "hobby" value = "cpp" /> cpp </ td > </ tr > < tr > < td > 国籍： </ td > < td > < select name = "country" > < option value = "none" > --请选择国籍-- </ option > < option selected = "selected" value = "cn" > 中国 </ option > < option value = "usa" > 美国 </ option > < option value = "jp" > 日本 </ option > </ select > </ td > </ tr > < tr > < td > 自我评价： </ td > < td >< textarea name = "desc" rows = "10" cols = "30" > 这是默认值 </ textarea ></ td > </ tr > < tr > < td >< input type = "submit" /></ td > < td align = "center" >< input type = "reset" /></ td > </ tr > </ table > </ form > </ body > 表单项： input type=text 文本输入框 value 属性默认值 input type=password 密码输入框 value 默认值 input type=radio 单选框 name 属性可以分组， checked=” checked ” 表示默认选中 value 属性是提交到服务器的值 input type=checkbox 复选框 checked= ’ checked ” 表示默认选中 value 属性是提交到服务器的值 input type=file 文件上传域 input type=hidden 隐藏域 input type=submit 提交按钮 value 属性可以修改按钮上显示的文字 input type=reset 重置按钮 value 属性可以修改按钮上显示的文字 下拉列表： select 下拉列表中的选项 option selected=” selected ” 表示默认选中 value 属性提交到服务器的值。 多行文本域： textarea 多行文本域 rows 设置高度 cols 设置宽度 form 标签 是表单标签 action 提交的服务器地址 method 提交的方式 GET 和 POST 如果 form 标签提交的时候，数据没有提交到服务器的两个原因： 1. 表单项，没有 name 属性值。 2. 表单项，没有在提交的 form 标签中 GET 请求的特点： 1. 浏览器地址栏有 action? 请求的参数（ name=value&name=value ） 2. 不安全 3. 长度限制 POST 请求的特点： 1. 浏览器地址栏只有 action 的属性值 2. 请求安全 3. 没有长度限制，可以提交大量的数据。 9.11 其他标签 需求 1 ： div 、 span 、 p 标签的演示 div 块标签 （主要用来布局） span 内联标签，主要用来封装文本内容 p 段落标签，主要用来封装文本 <!-- div 是块标签 默认会独占一行 span 封装文本，它的长度，就是文本内容的长度 p 是段落标签 ，默认会在段落的上方和下方，或空出一行来 --> < div > 不是 div 标签 1 </ div > < div > 不是 div 标签 2 </ div > < span > 这是 span标签1 </ span > < span > 这是 span标签2 </ span > < p > 这是段落标签 1 </ p > < p > 这是段落标签 2 </ p > HTML 最后的练习 2, ：创建登录的表单，包含用户名，密码框输入。并结合 table 标签排版。让它看上去整齐点
CSS 技术介绍 CSS2.0.chm CSS 是「层叠样式表单」。是用于 ( 增强 ) 控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 3.2 、 CSS 语法规则： 选择器 ：浏览器根据 “选择器” 决定受 CSS 样式影响的 HTML 元素（标签）。 属性 (property) 是你要改变的样式名，并且每个属性都有一个值。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明（ declaration ），例如： p {color: blue} 多个声明： 如果要定义不止一个声明，则需要用分号将每个声明分开。虽然最后一条声明的最后可以不加分号，但尽量在每条声明的末尾都加上分号 例如： p{ color:red;// 修改颜色为红色 font-size:30px;// 修改字体大小，为 30 像素。 } 每行最好只描述一个属性 CSS 注释： /* 注释内容 */ 3.3 、 CSS 和 html 的结合方式 3.3.1 、第一种： 在标签的 style 属性上设置 ” key:value value; ” ，修改标签样式。 < div > div 标签 1 </ div > < div > div 标签 2 </ div > < span > span标签1 </ span > < span > span标签2 </ span > 需求 1 ：分别定义两个 div 、 span 标签，分别修改每个 div 标签的样式为：边框 1 个像素，实线，红色。 <!-- 需求1：分别定义两个 div 、 span标签，分别修改每个 div 标签的样式为：边框 1个像素，实线，红色。 --> < div style =" border : 1px solid red ;" > div 标签 1 </ div > < div style =" border : 1px solid red ;" > div 标签 2 </ div > < span style =" border : 1px solid red ;" > span标签1 </ span > < span style =" border : 1px solid red ;" > span标签2 </ span > 问题：这种方式的缺点？ 1. 如果标签多了。样式多了。代码量非常庞大。 2. 可读性非常差。 3.Css 代码没什么复用性可方言。 3.3.2 、第二种： 在 head 标签中，使用 style 标签来定义各种自己需要的 css 样式。 格式如下： xxx { Key : value value; } < div > div 标签 1 </ div > < div > div 标签 2 </ div > < span > span标签1 </ span > < span > span标签2 </ span > 需求 1 ：分别定义两个 div 、 span 标签，分别修改每个 div 标签的样式为：边框 1 个像素，实线，红色。 < title > Insert title here </ title > <!-- style 标签中定义的都是CSS样式代码。 --> < style type = "text/css" > /*需求1：分别定义两个 div、span标签，分别修改每个 div 标签的样式为：边框1个像素，实线，红色。 第二种 css与html结合的方法 */ div { border : 1px solid red ; } span { border : 1px solid red ; } </ style > </ head > < body > < div > div 标签 1 </ div > < div > div 标签 2 </ div > < span > span标签1 </ span > < span > span标签2 </ span > </ body > Css 注释 /* 这是 css 的代码注释 */ 问题：这种方式的缺点。 1. 只能在同一页面内复用代码，不能在多个页面中复用 css 代码。 2. 维护起来不方便，实际的项目中会有成千上万的页面，要到每个页面中去修改。工作量太大了。 3.3.3 、第三种： 使用 html 的 < link rel = "stylesheet" type = "text/css" href = "./styles.css" > 标签 导入 css 样式文件。 3.4 、 CSS 选择器 3.4.1 、标签名选择器 标签名选择器的格式是： 标签名 { 属性：值； } < div > div 标签 1 </ div > < div > div 标签 2 </ div > < span > span标签1 </ span > < span > span标签2 </ span > 需求 1 ：在所有 div 标签上修改字体颜色为蓝色，字体大小 30 个像素。边框为 1 像素黄色实线。 并且修改所有 span 标签的字体颜色为黄色，字体大小 20 个像素。边框为 5 像素蓝色虚线。 < head > < meta charset = "UTF-8" > < title > CSS选择器 </ title > < style type = "text/css" > /* 需求 1：在所有div标签上修改字体颜色为蓝色，字体大小30个像素。边框为1像素黄色实线。 并且修改所有 span 标签的字体颜色为黄色，字体大小20个像素。边框为5像素蓝色虚线。 就可以使用标签名选择器 格式是： 标签名 { 属性：值； } */ div { color : blue ; border : 1px yellow solid ; font-size : 30px ; } span { color : yellow ; font-size : 20px ; border : 5px blue dashed ; } </ style > </ head > < body > < div > div 标签 1 </ div > < div > div 标签 2 </ div > < span > span标签1 </ span > < span > span标签2 </ span > </ body > 3.4.2 、 id 选择器 ID 选择器格式： #id 属性值 { 属性：值； } 需求 1 ：分别定义两个 div 标签， 第一个 div 标签定义 id 为 id001 ，然后根据 id 属性定义 css 样式修改字体颜色为蓝色， 字体大小 30 个像素。边框为 1 像素黄色实线。 第二个 div 标签定义 id 为 id002 ，然后根据 id 属性定义 css 样式 修改的字体颜色为红色，字体大小 20 个像素。边框为 5 像素蓝色点线。 < div id = "id001" > div 标签 1 </ div > < div id = "id002" > div 标签 2 </ div > < head > < meta charset = "UTF-8" > < title > ID选择器 </ title > < style type = "text/css" > /* ID选择器格式： #id属性值{ 属性：值； } 需求 1：分别定义两个 div 标签， 第一个 div 标签定义 id 为 id001 ，然后根据id 属性定义css样式修改字体颜色为蓝色， 字体大小 30个像素。边框为1像素黄色实线。 第二个 div 标签定义 id 为 id002 ，然后根据id 属性定义css样式 修改的字体颜色为红色，字体大小20个像素。边框为5像素蓝色点线。 */ #id001 { color : blue ; font-size : 30px ; border : 1px yellow solid ; } #id002 { color : red ; font-size : 20px ; border : 5px blue dotted ; } </ style > </ head > < body > < div id = "id001" > div 标签 1 </ div > < div id = "id002" > div 标签 2 </ div > </ body > 3.4.3 、 class 选择器（类选择器） class 类型选择器的格式： . class 属性值 { 属性：值； } 需求 1 ：修改 class 属性值为 class01 的 span 或 div 标签，字体颜色为蓝色，字体大小 30 个像素。边框为 1 像素黄色实线。 需求 2 ：修改 class 属性值为 class02 的 div 标签，字体颜色为灰色，字体大小 26 个像素。边框为 1 像素红色实线。 <! DOCTYPE html> < html > < head > < meta charset = "UTF-8" > < title > class类型选择器 </ title > < style type = "text/css" > /*需求1：修改 class 属性值为 class01的 span 或 div 标签，字体颜色为蓝色，字体大小30个像素。边框为1像素黄色实线。 需求 2：修改 class 属性值为 class02的 div 标签，字体颜色为灰色，字体大小26个像素。边框为1像素红色实线。 class类型选择器格式： .class属性值{ 属性：值； } */ .class01 { color : blue ; font-size : 30px ; border : 1px yellow solid ; } .class02 { color : green ; font-size : 26px ; border : 1px red solid ; } </ style > </ head > < body > < div class = "class01" > div 标签 class01 </ div > < div class = "class02" > div 标签 </ div > < span > span标签class01 </ span > < span > span标签2 </ span > </ body > </ html > 3.4.4 、组合选择器 组合选择器格式： 选择器 1 ，选择器 2{ 属性：值； } < style type = "text/css" > /*需求1：修改 class="class01" 的div 标签 和 id="id01" 所有的span标签， 字体颜色为蓝色，字体大小 20个像素。边框为1像素黄色实线。*/ .class01 , #id01 { color : blue ; font-size : 20px ; border : 1px yellow solid ; } </ style > </ head > < body > < div class = "class01" > div 标签 class01 </ div > < br /> < span id = "id01" > span 标签 </ span > < br /> < div > div 标签 </ div > < br /> < div > div 标签 id01 </ div > < br /> </ body > 3.5 、常用样式： 1 、颜色 color ： red ； 颜色可以写颜色名如： black, blue, red, green 等 颜色也可以写 rgb 值和十六进制表示值：如 rgb(255,0,0) ， #00F6DE ，如果写十六进制值必须加 # 2 、宽度 width:19px; 宽度可以写像素值： 19px ； 也可以写百分比值： 20% ； 3 、高度 height:20px; 高度可以写像素值： 19px ； 也可以写百分比值： 20% ； 4 、背景颜色 background-color:#0F2D4C 4、 字体样式： color ： #FF0000 ；字体颜色红色 font-size ： 20px; 字体大小 5、 红色 1 像素实线边框 border ： 1px solid red; 7 、 DIV 居中 margin-left: auto; margin-right: auto; 8、 文本居中： text-align: center; 9、 超连接去下划线 text-decoration: none; 10、 表格细线 table { border: 1px solid black; /* 设置边框 */ border-collapse: collapse; /* 将边框合并 */ } td,th { border: 1px solid black; /* 设置边框 */ } 11、 列表去除修饰 ul { list-style: none; }
