阶段02JavaWeb基础day01html&css
HTML 基础 概念 全写： HyperText Mark-up Language
译名： 超文本标记语言 超级文本标记语言是一种规范，一种标准，
超文本标记语言它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。 1.功能是用于展示
2.HTML语言由浏览器解析
3.后缀名是html或htm HTML文档结构 头部分:head 头部中包含的标记是页面的标题、序言、说明等内容，它本身不作为内容来显示，但影响网页显示的效果。头部中最常用的标记符是标题标记符和meta标记符 正文部分:body 网页中显示的实际内容均包含在这2个正文标记符之间。 标签(标记),属性 任何标记皆由"<"及">"所围住，如 <P>
标记名与小于号之间不能留有空白字符。
某些标记 要加上参数，某些则不必。如 <font size="+2">Hello</font>
参数只可加于起始标记中。
在起始标记之标记名前加上符号"/"便是其终结标记，如 </font>
标记字母大小写皆可。 标签分类 围堵标记 它以起始标记及终结标记将文字围住，令其达到预期显示效果。 空标记(自闭合) 是指标记单独出现，只有开始标记没有结束标记。 标签 文档标记 <HTML> ● 文件声明 让浏览器知道这是 HTML 文件 <HEAD> ● 开头 提供文件整体资讯 <TITLE> ● 标题 定义文件标题，将显示于浏览顶端 <BODY> ● 本文 设计文件格式及内文所在 排版标记 <!--注释--> ○ 说明标记 为文件加上说明，但不被显示 <P> ● 段落标记 为字、画、表格等之间留一空白行 <BR> ○ 换行标记 令字、画、表格等显示于下一行 <HR> ○ 水平线 插入一条水平线 <PRE> ● 预设格式 令文件按照原始码的排列方式显示 (了解) 字体标记(了解) <STRONG> ● 加重语气 产生字体加粗 Bold 的效果 <B> ● 粗体标记 产生字体加粗的效果 <EM> ● 强调标记 字体出现斜体效果 <I> ● 斜体标记 字体出现斜体效果 <U> ● 加上底线 加上底线 反对 <H1> ● 一级标题标记 变粗变大加宽，程度与级数反比 <H2> ● 二级标题标记 将字体变粗变大加宽 <H3> ● 三级标题标记 将字体变粗变大加宽 <H4> ● 四级标题标记 将字体变粗变大加宽 <H5> ● 五级标题标记 将字体变粗变大加宽 <H6> ● 六级标题标记 将字体变粗变大加宽 <FONT> ● 字形标记 设定字形、大小、颜色 <BIG> ● 字体加大 令字体稍为加大 <SMALL> ● 字体缩细 令字体稍为缩细 <STRIKE> ● 画线删除 为字体加一删除线 反对 <SUB> ● 下标字 指数 <SUP> ● 下标字 下标字 转义字符(实体) < < 小於号或显示标记 > > 大於号或显示标记 & & 可用於显示其它特殊字符 " " 引号 ® ® 己注册 © © 版权 ™ ™ 商标 空格 清单标记 <OL> ● 顺序清单 清单项目将以数字、字母顺序排列 start type <UL> ● 无序清单 清单项目将以圆点排列 type <LI> ○ 清单项目 每一标记标示一项清单项目 <DL> ● 定义清单 清单分两层出现 <DT> ○ 定义条目 标示该项定义的标题 <DD> ○ 定义内容 标示定义内容 图形标记 <IMG> ○ 图形标记 用以插入图形及设定图形属性 alt text 规定图像的替代文本。 STF src URL 规定显示图像的 URL。 border pixels 不推荐使用。定义图像周围的边框。 height 定义图像的高度。 width 设置图像的宽度。 usemap URL 将图像定义为客户器端图像映射。 title 设置鼠标悬浮时的提示信息 链接标记 <A> ● 链接标记 加入链接 href URL 链接的目标 URL。 name section_name 规定锚的名称。 target 在何处打开目标 URL。 _blank _parent _self _top framename 表格标记 <TABLE> ● 表格标记 设定该表格的各项参数 border pixels 规定表格边框的宽度。 cellpadding 规定单元边沿与其内容之间的空白。(外边据) cellspacing 规定单元格之间的空白。 <TR> ● 表格列 设定该表格的列 <TD> ● 表格栏 设定该表格的栏 colspan number 规定单元格可横跨的列数。 rowspan number 规定单元格可横跨的行数。 align 规定单元格内容的水平对齐方式。 <TH> ● 表格标头 相等于<TD>，但其内之字体会变粗 colspan number 规定单元格可横跨的列数。 rowspan number 规定单元格可横跨的行数。 align 规定单元格内容的水平对齐方式。 框架标签(了解) <FRAMESET> ● 框架设定 设定框架 cols 定义框架集中列的数目和尺寸。 rows 定义框架集中行的数目和尺寸。 <FRAME> ○ 框窗设定 设定框窗 frameborder 规定是否显示框架周围的边框。 noresize noresize 规定无法调整框架的大小。 scrolling 规定是否在框架中显示滚动条。 src URL 规定在框架中显示的文档的 URL。 name name 规定框架的名称。 <IFRAME> ○ 页内框架 于网页中间插入框架 IE src URL 规定在 iframe 中显示的文档的 URL。 frameborder 规定是否显示框架周围的边框。 height 规定 iframe 的高度。 width 定义 iframe 的宽度。 表单标记 <FORM> ● 表单标记 决定单一表单的运作模式 action URL 规定当提交表单时，向何处发送表单数据。 method 规定如何发送表单数据。 POST GET 1.GET提交的键值对会出现在URL上.POST不会
2.POST提交安全性相对较高
3.GET提交数据长度有限.POST理论上没有限制. <TEXTAREA> ● 文字区块 提供文字方盒以输入较大量文字 cols number 规定文本区内的可见宽度。 rows number 规定文本区内的可见行数。 disabled disabled 规定禁用该文本区。 name name_of_textarea 规定文本区的名称。 readonly readonly 规定文本区为只读。 <INPUT> ○ 输入标记 决定输入形式 type button (与js结合,本身无意义) checkbox 多选框 file 文件上传 hidden 隐藏域 password 密码输入框 radio 单选框 reset 重置按钮 submit 提交按钮 text 文本输入框 name field_name 定义 input 元素的名称。 value value 规定 input 元素的值。 http://www.baidu.com?name=tom&age=18 readonly readonly 规定输入字段为只读。 disabled disabled 当 input 元素加载时禁用此元素。 checked checked 规定此 input 元素首次加载时应当被选中。 maxlength number 规定输入字段中的字符的最大长度。 size number_of_char 定义输入字段的宽度。 <SELECT> ● 选择标记 建立 pop-up 卷动清单 disabled disabled 规定禁用该下拉列表。 multiple multiple 规定可选择多个选项。 name name 规定下拉列表的名称。 size number 规定下拉列表中可见选项的数目。 <OPTION> ○ 选项 每一标记标示一个选项 disabled disabled 规定此选项应在首次加载时被禁用。 selected selected 规定选项（在首次显示在列表中时）表现为选中状态。 value text 定义送往服务器的选项值。 样式(CSS)标记 <STYLE> ● 样式表 控制网页版面 <span> ● 自订标记 独立使用或与样式表同用 <DIV> ● 区隔标记 设定字、画、表格等的摆放位置 其他标记 <META> ○ 开头定义 让浏览器知道这是 HTML 文件 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name=“keywords” content=“传智播客，IT培训" /> <meta name="description" content="传智播客是国内最大的……" /> <meta http-equiv="refresh" content="3;url=http://www.sina.com.cn" /> <LINK> ○ 关系定义 定义该文件与其他 URL 的关系 <link rel="stylesheet" type="text/css" href="hello.css">
CSS(了解) 概念 CSS(Cascading Style Sheet)层叠样式表 CSS能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。 引入方式 链入外部样式表文件 (Linking to a Style Sheet) 你可以先建立外部样式表文件（.css），然后使用HTML的link对象。示例如下：
<head>
<title>文档标题</title>
<link rel=stylesheet href="hello.css" type="text/css">
</head>
定义内部样式块对象 (Embedding a Style Block) 你可以在你的HTML文档的<HTML>和<BODY>标记之间插入一个<STYLE>...</STYLE>块对象。 定义方式请参阅样式表语法。示例如下：
<html>
<head>
<title>文档标题</title>
<style type="text/css">
<!--
body {font: 10pt "Arial"}
h1 {font: 15pt/17pt "Arial"; font-weight: bold; color: maroon}
h2 {font: 13pt/15pt "Arial"; font-weight: bold; color: blue}
p {font: 10pt/12pt "Arial"; color: black}
-->
</style>
</head>
<body>
内联定义 (Inline Styles) 内联定义即是在对象的标记内使用对象的style属性定义适用其的样式表属性。示例如下：
<p style="margin-left: 0.5in; margin-right:0.5in">这一行被增加了左右的外补丁<p>
样式表语法 (CSS Syntax) Selector { property: value }
参数说明：
Selector -- 选择符
property : value -- 样式表定义。属性和属性值之间用冒号(:)隔开。多个定义之间用分号(;)隔开 选择器 元素选择器 语法：
E { sRules }
元素选择符。以文档元素作为选择符。
示例：
td { font-size:14px; width:120px; }
a { text-decoration:none; } CLASS选择器 语法：
E.className { sRules }
说明：
类选择符。
示例：
div.note { font-size:14px; }
/* 所有class属性值等于（包含）"note"的div对象字体尺寸为14px */
.dream { font-size:14px; }
/* 所有class属性值等于（包含）"note"的对象字体尺寸为14px */ ID选择器 语法：
#ID { sRules }
说明：
ID选择符。以文档目录树(DOM)中作为对象的唯一标识符的 ID 作为选择符。
示例：
#note { font-size:14px; width:120px;} 伪类选择器 语法:
选择器:伪类{} l : link 未点击过的连接 v : visited 点击过的连接 h : hover 悬浮时状态 a : active 点下鼠标没松手 选择器分组 语法：
E1 , E2 , E3 { sRules }
说明：
选择符分组。将同样的定义应用于多个选择符，可以将选择符以逗号分隔的方式并为组。
示例：
.td1,div a,body { font-size:14px; }
td,div,a { font-size:14px; }
常见属性 字体属性 Font Properties font-style font-variant font-weight font-size line-height font-family 尺寸属性 Dimensions Properties height width 背景属性 Background Properties background-color background-image background-repeat background-attachment background-position 边框属性 Borders Properties border border-color border-style border-width 内补丁属性 Paddings Properties padding padding-top padding-right padding-bottom padding-left 外补丁属性 Margins Properties margin margin-top margin-right margin-bottom margin-left 长度单位 px-绝对-像素(最常用) pt-绝对-点 pc-绝对-派卡 in-绝对-英寸 cm-绝对-厘米 mm-绝对-毫米 1in = 2.54cm = 25.4 mm = 72pt = 6pc
声明：本文为原创，作者为 对弈，转载时请保留本声明及附带文章链接：http://www.duiyi.xyz/c%e5%ae%9e%e7%8e%b0%e9%9b%b7%e9%9c%86%e6%88%98%e6%9c%ba-35/
腾讯云开发者
