2021科协前端培训 HTML概念语法标签学习表单 CSS概念作用CSS 规则引入CSS样式表内联样式内部样式表外部样式表 CSS基础选择器CSS扩展选择器CSS字体样式(font)CSS背景(background)页面布局盒子模型盒子边框(border) 浮动清除浮动 常用布局 HTML 概念
全称为超文本标记语言，是一种标记语言。它包括一系列标签，通过标签将网络上的文档格式统一，是分散的Internet资源链接为一个逻辑整体。它可以说明文字、图形、动画、声音、表格、链接等。
1.超文本： 超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息相关联。
2.标记语言： 标记语言是一种将文本以及文本相关的其他信息结合起来，展现出关于文档结构和数据处理细节的电脑文字编码。他与文本相关的其他信息结合起来但是使用标记进行标识。
语法1.html文档的后缀名是.html或.htm。 2.标签特点：
（1）由尖括号包围的关键词组成，如<html> （2）可分为单标签和双标签 双标签：有开始标签和结束标签，如<body></body> 单标签：开始标签和结束标签在一起，如<hr> （3）在开始标签内部可以定义属性， （4）标签不分大小写，建议使用小写 （5）标签可以嵌套 标签学习1.文件标签：
<!--注释内容--> <!DOCTYPE html>：表示该文件是html文件，使用h5的标准解析 <html>：定义html文件 <head>：所有头部文件的容器，是引入外部元素的位置 <title>：定义浏览器工具栏中的标题，在所有的html文件中是必须的 <body>：定义文档的主体部分，包含文档的所有内容2.文本标签：
<h1>到<h6>：标题标签，字体大小由大到小 <p>：段落标签，定义段落、】 <hr>：定义水平线，单标签 <br>：换行标签，定义换行 <b>：加粗标签，将内部文字加粗 <i>：倾斜，将内部文字倾斜 <center>：居中标签，将内部文字相对网页居中3.图片标签：
<img src=””>：图片标签，src用于指定图片文件位置，单标签 相对路径： ./：表示当前文件目录，如：./img/图片.jpg。 ../：表示上一级目录。4.链接标签：
<a>定义一个超链接 属性： herf：指定访问资源的URL target：指定打开资源的方式 _self：默认值，在当前页面打开 _blank：在空白页打开5.表格标签：
<table>：定义表格 width：宽度 border：边框 cellpadding：框线与内容的距离 cellspacing：单元格之间的距离 bgcolor：背景颜色 align：内容的对齐方式 <tr>：定义表格的一行 height：行的高度 bgcolor：背景颜色 align：内容的对齐方式 <td>：定义一个单元格 colspan：合并列 rowspan：合并行 width：设置单元格的宽度6.转义：
：空格 <：< >：>7.列表标签：
<ol>，<li>：有序列表 <ul>，<li>：无序列表 <dl>，<dt>，<dd>：自定义列表8.div和span
<div>：占一行，定义一个区域，常用于组合块级元素 <span>：用于对文档中的行内元素进行组合 表单 概念：用于与服务器进行交互。 <form>：表单最外层，表示此区域用于与用户进行交互 action：指定提交数据的URL method：指定交互的方式 常用的两种： get：请求参数会显示在地址栏中，内容大小有限制，不安全。 post：请求参数不会显示在地址栏中，内容大小没有限制，较安全。 <input>：表单最基本的标签，用户输入数据的位置 type：input的属性，表示input的类型 text：文本输入框 placeholder：指定输入框的提示信息 passward：密码输入框 radio：单选框 name：必须设置相同的name才能实现单选效果 value：被选中时提交的数据 checked：指定默认值 checkbox：复选框 button：按钮 submit：提交按钮 reset：重置按钮 file：文件选择按钮 img：图片提交按钮 CSSCSS：样式渲染、网页美化、页面布局
概念CSS(Cascading Style Sheets) 通常称为CSS样式表或层叠样式表(级联样式表)。 层叠就是多个样式可以作用在同一个html的元素上，同时生效。
作用结构(html)与样式(css)分离。 让HTML从样式中脱离，实现了HTML专注去做结构呈现，样式交给CSS。 CSS主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局，
? 降低耦合度。解耦 ? 让分工协作更容易 ? 提高开发效率
CSS 规则CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:
选择器通常是您需要改变样式的 html 元素。 每条声明由一个属性和一个值组成。 属性（property）是你希望设置的样式属性（style attribute）。 每个属性有一个值。属性和值被冒号分开。
CSS 注释
/* 这是注释 */ 引入CSS样式表CSS与html结合方式
内联样式通过标签的style属性来设置元素的样式
style其实就是标签的属性 样式属性和值中间是: 多组属性值直接用;隔开 <标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名> <!--例如：改变段落的文字颜色和大小--> <p style="color: red; font-size: 12px;">这是一个段落</div> 内部样式表也称为内嵌式，将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义。
style标签一般位于head标签中，当然理论上他可以放在HTML文档的任何地方。 type="text/css" 在html5中可以省略。 <head> <style type="text/CSS"> 选择器（选择的标签） { 属性1: 属性值1; 属性2: 属性值2; 属性3: 属性值3; } </style> </head> 外部样式表也称链入式，是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中。
rel:定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。 href:定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。 <link rel="stylesheet" href="index.css"> CSS基础选择器CSS选择器作用：找到指定的HTML页面元素，选择标签。
CSS背景(background)
标签显示模式(display)
标签显示模式是标签以什么方式进行显示。HTML标签一般分为块标签和行内标签两种类型，它们也称为块元素和行内元素。
标签显示模式转换 display
- 块转行内：display:inline; - 行内转块：display:block; - 块、行内元素转换为行内块：display: inline-block;三种模式
网页布局的本质
首先利用CSS设置好盒子的大小，然后摆放盒子的位置。 最后把网页元素比如文字图片等等，放入盒子里面。W3c标准盒子模型
标准 w3c 盒子模型的范围包括 margin、border、padding、content 盒子的实际大小：内容的宽度和高度 + 内边距 + 边框
注意：width和height设置的都是content的内容
盒子边框(border)内边距(padding) padding属性用于设置内边距。是指边框与内容之间的距离。
外边距（margin）
margin属性用于设置外边距。margin就是控制盒子和盒子之间的距离
块级盒子水平居中 盒子指定宽度（width） 然后给左右的外边距都设置为auto 常见的写法，以下下三种都可以 margin-left: auto; margin-right: auto; margin: auto; margin: 0 auto; 文字居中和盒子居中区别 1. 盒子内的文字水平居中是 text-align: center; 而且还可以让行内元素和行内块居中对齐 2. 块级盒子水平居中 左右margin 改为 auto 浮动 优点： 1. 实现层叠布局,简单实现精美布局 2. 实现文字环绕 3.解决行内元素不能设置宽高属性问题 ...... 缺点： 父元素塌陷问题 清除浮动元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。clear 属性指定元素两侧不能出现浮动元素。
1.添加额外标签清除浮动。
<div class="parent"> <div class="f"></div> <div style="clear:both"></div> </div>优点：通俗易懂，容易掌握。 缺点：添加了无意义的空标签，后期不好维护。
2.添加<br>标签，使用<br>标签本身的的clear属性
<div class="parent"> <div class="f"></div> <br clear="all"> </div>优点：通俗易懂，容易掌握。 缺点：添加了无意义的空标签，后期不好维护。
3.父元素设置overflow:hidden
<div class="parent" style="overflow:hidden"> <div class="f"></div> </div>优点：代码量少。 缺点：内容较多时不换行的文件会被隐藏，无法显示溢出元素。
4.使用伪元素:after（推荐使用）
.parent:after{ content:""; visibility:hidden; display:block; width:100%; height:0; clear:both; } <div class="parent"> <div class="f"></div> </div>优点：结构和语义正确，没有多余的标签，一般不会产生新的问题。 缺点：复用方式不当会造成代码量增多。
常用布局float（浮动）
static（默认）
Position：static； 默认值。也就是按照文档的流式（flow）定位，将元素放到一个合适的地方。所以在不同的分辨率下，采用流式定位能很好的自适应，取得相对较好的布局效果。 Static定位不能通过z-index进行层次分级。
relative（相对定位）
Position：relative； 在static基础上，让元素在它本来的位置上有一定的偏移。 通过设置left/right、top/bottom值来实现。 相对定位的元素没有脱离文档流，仍处于文档流中，依然占据原来的位置，虽然它已偏移。 相对定位相对的元素是它自身在文档流中的位置。
absolute（绝对定位）
Position：absolute； 使用绝对定位将一个元素放到文档（Document）中的指定位置。 也是通过设置left/right、top/bottom值来实现。 绝对定位的元素参照的是离它最近的父元素（非static定位）。通常采用“子绝父相”的定位方式。
fixed（固定定位） Position：fixed； 固定定位的元素的参照物始终是整个文档（viewport）。 通过设置left/right、top/bottom值来让某一个元素定位在浏览器文档的某一个位置。 它与绝对定位的不同之处是：绝对定位的参照是离它最近的非static定位的父元素，而固定定位的参照始终是viewport。
sticky（粘性定位） Position：sticky； 不论页面如何移动，当页面将元素移出可视区域时，固定于页面上。
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |