前端开发入门：html和css基础知识回顾

谁践踏了优雅 2022-08-18 11:49 183阅读 0赞

前端入门：零基础：前端基本技能，web开发基础(html+css+javascript)、学习方法、学习资料；兴趣：web技术（html+css网页制作）、ps技能、前端自动化工具、前端架构、前端MVVM、MVC、MV\*框架和设计模式、各种调试web抓包工具、移动设备web调试工具、浏览器工作原理、前端安全规范和防护。

1. 文件结构：

HTML用什么写和什么读？建议用火狐和谷歌浏览器，符合W3C的标准。编辑我们可以用sublime Text或文本、UE、EditPlus、Notepad等文本编辑器书写。调试可以用         FireFox+Firebug插件或者谷歌插件进行调试代码。

3种文本类型DocType：（1）Strict(严格)；（2）Tranditional（传统）;（3）FrameSet（框架）

HTML文件的固定结构：  
    <html>  
        <head>...</head>  
        <body>...</body>  
    </html>  
    html是根标签，  
    head定义文档头部，包含： title, script, style, link, meta  
    body是网页主要内容，包含：h1,h2-h6, p, a, img  
  
2. 认识head标签：  
    <head>  
        <title>...</title>         网页标题  
        <meta>  
        <link>  
        <style>...</style>  
        <script>...</script>  
    </head>  
  
3. 语义化：  
    明白每个标签的用途（在什么情况下我可以使用这个标签才合理）  
        比如，网页上的文章的标题就可以用标题标签，  
        网页上的各个栏目的栏目名称也可以使用标题标签。  
        文章中内容的段落就得放在段落标签中，在文章中有想强调的文本，就可以使用em标签表示强调等等。

4. 认识body标签：

<center>中心</center>     中心标签

<p>段落文本</p>              有三段就放三个<p></p>

<h1>标题文本</h1>            h1-h6共6个标题分级  
    <em>斜体文本（强调）</em>    斜体文本内容  
    <strong>粗体文本</strong>    粗体显示文本内容  
    <span>单独样式文本</span>    没有语义的，它的应用就是为了 设置单独的格式用的

<q>引用的文本</q>            引用的文本内容，会自动加上双引号

<marquee>滚动效果</marquee>        引用的文本文字、图片滚动效果

<blockquote>大段引用</blockquote>    引用大段的文本内容，文本前后会加上缩进  
    <br/>                        换行  
    <hr/>                        水平横线  
    &nbsp;                       空格  
    <address>地址信息</address>  地址信息，通常用于公司地址显示  
    <code>代码内容</code>        代码，通常是一行内  
    <pre>多行代码</pre>          多行代码,你需要在网页中预显示格式时都可以使用它  
    <ul>                         ul-li 列表信息，以圆点显示（无序列表）  
      <li>信息1</li>  
      <li>信息2</li>  
       ......  
    </ul>  
    <ol>                         ol-li 列表信息，带上序号（有序列表）  
       <li>信息</li>  
       <li>信息</li>  
       ......  
    </ol>  
    <div>排版内容<div>           排版中使用，相当于一个容器  
                                 确定逻辑部分：逻辑部分是页面上相互关联的一组元素，如栏目版块  
    <div id="版块名称">…</div>  div 带上ID号，使之更清晰  
    <table>表格内容</table>      创建表格  
        <caption>标题文本</caption>         为表格添加标题文本  
        <tbody>...</tbody>       若加此标签后，表格会一次性显示出来（而非网页加载一点显示一点）  
        <tr>表格一行</tr>        表格中的一行  
        <td>表格单元格</td>      表格中的一个单元格  
        <th>表格表头</th>        表格头部的一个单元格，表格表头  
    <table summary="表格摘要">...</table>    为表格添加摘要，但不会被浏览器显示出来  
    <a href="目标网址" title="鼠标滑过时显示文本">链接显示文本</a>    链接标签  
        target="\_blank"           网页将在新窗口中打开  
        mailto:                   网页中邮件地址，可带多个参数  
            mailto: 邮箱地址  
            cc=     抄送地址  
            bcc=    密抄地址  
            ;       多个邮箱地址  
            subject=邮件主题  
            body=   邮件内容  
        完整举例: <a href="mailto:yy@sf.com ?cc=aa@sf.com &bcc=bb@sf.com &subject=主题 &body=邮件内容">发送邮件</a>  
    <img scr="图片地址" alt="下载失败时替换文本" title="提示文本" />  
  
5. 与用户交互：  
    语法：  
        <form method="传送方式" action="服务器文件"></form>  
    举例：  
        <form    method="post"   action="save.php">  
            <label for="username">用户名:</label>  
            <input type="text" name="username" />  
            <label for="pass">密码:</label>  
            <input type="password" name="pass" />  
        </form>  
    表单控件：  
        文本框、文本域、按钮、单选框、复选框；  
    method:  
        post/get  
    1. 文本框（文本/密码）  
        <form>  
           <input type="text/password" name="名称" value="文本" />  
        </form>  
        type：有“text”和“password”两种类型  
        name：为文本框命名，方便后台ASP和PHP使用  
        value：文本框默认值，一般起提示作用  
    2. 文本域（多行文本）  
        <textarea rows="行数" cols="列数">默认文本内容</textarea>  
        cols：多行输入域的列数  
        rows：多行输入域的行数  
    3. 单选框、复选框  
        <input   type="radio/checkbox"   value="值"    name="名称"   checked="checked"/>  
        type：radio单选，checkbox复选框  
        value：提交数据到服务器的值，后台PHP处理使用  
        name：为控件命名，以备后台程序ASP和PHP使用  
        checked：checked="checked"时，此选项默认被选中  
        注意：同一组的单选按钮，name取值一定要一致  
    4. 下拉列表框  
        <form action="save.php" method="post" >  
            <label>爱好:</label>  
            <select multiple="multiple">  
              <label for="book>看书</label>          
              <option value="看书" id="book">看书</option>  
              <option value="旅游">旅游</option>  
              <option value="运动">运动</option>  
              <option value="购物">购物</option>  
            </select>  
            <input   type="submit"   value="提交">  
            <input   type="reset"    value="重置"  />  
        </form>  
        value：向服务器提交值  
        selected：设置selected="selected"时，默认选中  
        multiple：multiple="multiple"时，可以使用Ctrl多选，但很丑  
        label：为了改进鼠标易用性，鼠标点击文本时，选择上Radio  
  
6. 认识CSS样式：

CSS：层叠样式表（Cascading Style Sheets）又称级联样式表，主要用于定义HTML内容在浏览器内的显示样式，样式和内容/结构是分离的，HTML是表达结构，CSS是表  达样式。 好比人穿衣服，HTML是人，CSS是各种五颜六色的衣服；CSS高效的定义HTML元素外观和样式，描述html如何在浏览器中显示。

语法：  
        选择符\{ 属性: 值\}  
    举例：  
        p\{ color: blue\}  
    选择符：又称选择器，指明要应用样式规则的元素，如<html>、<body>、<h1>、<p>、<img>...  
    声明：指的是冒号”:“  
    多条声明：使用分号”;“隔开，最好每行都加上分号  
    注释：CSS使用 /\*\*/，HTML注释则使用  
  
7. CSS样式分类：  
    1. 内联式  
        <p style="color:red;font-size:12px">这里文字是红色。</p>  
    2. 嵌入式  
        较通用的一类，CSS样式放置在<style>标签中，而<style>通常要放置在<head>内  
        <style type="text/css">  
            span\{  
               color:blue;  
               font-size:12px;  
            \}  
        </style>  
    3. 外部式  
        把CSS代码写到一个单独的外部文件中，以.css扩展名结尾，在<head>内使用<link>标签引入，如：  
        <link href="base.css" rel="stylesheet" type="text/css" />  
        href: .css文件路径  
        rel和type: rel="stylesheet" type="text/css" 是固定写法，不能改  
    三种方法的优先级：  
        内联式 > 嵌入式 > 外部式 >浏览器的默认样式；  
        就近原则，嵌入式>外部式有一个前提：嵌入式css样式的位置一定在外部式的后面  
        以上规则适用于相同权值的情况  
8. CSS 类选择器  
    语法：  
        .类选器名称\{css样式代码;\}  
    举例：  
        <style type="text/css">  
        .stress\{  
            color:red;  
        \}  
        </style>  
    注意：前边的小圆点是必须要有的  
    使用：  
        <span class="stress">胆小如鼠</span>  
9. CSS ID选择器  
    语法：  
        \#ID选择器名称\{css样式代码\}  
    举例：  
        \#setGreen\{color:green;\}  
        <span id="setGreen">胆小如鼠</span>  
    区别：  
        起始于 '.' 与 '\#'  
        调用时 class= 与 id=  
        ID选择器只能在文档中使用一次，类选择器则可以使用多次  
        一个元素可以使用多个类选择器同时设置多个样式，而ID选择器是不可以的，如 <span class="stress bigsize">三年级</span>  
10.CSS 子选择器  
    还有一个比较有用的选择器子选择器，即大于符号(>),用于选择指定标签元素的第一代子元素。举例：  
        .food>li\{border:1px solid red;\}  
    若大于符号换成空格( ),用于选择指定标签元素的所有后辈元素，举例：  
        .first span\{border:1px solid red;\}  
  
11. CSS 通用选择器  
    通用选择器是功能最强大的选择器，它使用一个（\*）号指定，它的作用是匹配html中所有标签元素：  
        \* \{color: red;\}  
    此时，所有元素的字体都为红色  
  
12. CSS 伪类选择符：在原有选择器的基础上添加一个限度条件hover，当某种情况发生时再选择这个标签。  
    伪类选择符，它允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色  
        a:hover\{color:red;\}  
    此时，把鼠标放置到元素上边，颜色就会切换为红色  
  
13. CSS 分组选择符  
    多个标签使用逗号隔开：  
        h1,span\{color:red;\}  
    相当于：  
        h1\{color:red;\}  
        span\{color:red;\}  
  
14. CSS 继承  
    CSS的某些样式是具有继承性的，那么什么是继承呢？继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代  
    如：  
        p\{color:red;\} /\*可被span继承\*/  
        p\{border:1px solid red;\} /\*此时，span将不继承，边框显示红色\*/  
  
15. CSS 特殊性（权值）  
    权值：  
        p\{color:red;\} /\*权值为1\*/  
        p span\{color:green;\} /\*权值为1+1=2\*/  
        .warning\{color:white;\} /\*权值为10\*/  
        p span.warning\{color:purple;\} /\*权值为1+1+10=12\*/  
        \#footer .note p\{color:yellow;\} /\*权值为100+10+1=111\*/  
    注意：还有一个权值比较特殊--继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。  
    层叠：  
        相同权值时，最后一个将被应用  
    重要性：  
        相同权值时，使用 !important 将得到最高权重，如 p\{color:red!important;\}  
        样式优先级为：浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式，使用 !important 优先级比 用户自己设定 还高  
  
16. CSS 文字排版  
    1. 字体  
        body\{font-family:"宋体";\}  
        body\{font-family:"Microsoft Yahei";\}  
    2. 字号，颜色  
        body\{font-size:12px;color:\#666\}  
    3. 粗体  
        p span\{font-weight:bold;\}  
        a\{font-weight:bold;\}  
    4. 斜体  
        p a\{font-style:italic;\}  
        p\{font-style:italic;\}  
    5. 下划线  
        p a\{text-decoration:underline;\}  
    6. 删除线  
        .oldPrice\{text-decoration:line-through;\}  
    7. 缩进  
        p\{text-indent:2em;\} /\*2em 表示两倍文字大小\*/  
    8. 行间距  
        p\{line-height:1.5em;\}  
    9. 字间距、字母间距  
        h1\{letter-spacing:50px;word-spacing:50px;\} /\*分别是字母、单词间距\*/  
    19.对齐  
        h1\{text-align:center;\} /\*left、right和center\*/  
  
17. CSS 元素分类  
    块状元素：  
        <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>  
    内联元素：  
        <a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>  
    内联块状元素：  
        <img>、<input>  
  
    1. 块状元素：  
        1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）  
        2、元素的高度、宽度、行高以及顶和底边距都可设置。  
        3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。  
        注意：a\{display:block;\} /\*可以把内联元素 a 转换为 块状元素\*/  
    2. 内联元素：  
        1、和其他元素都在一行上；  
        2、元素的高度、宽度、行高及顶部和底部边距不可设置；  
        3、元素的宽度就是它包含的文字或图片的宽度，不可改变。  
        注意：display:inline 可以转换成内联元素  
    3. 内联块状元素：  
        1、和其他元素都在一行上；  
        2、元素的高度、宽度、行高以及顶和底边距都可设置。  
        注意：display:inline-block 可以转换成内联块状  
  
18. CSS 盒模型  
    1. 边框  
        div\{ border:2px  solid  red;\}  
        相当于：  
        div\{  
            border-width:2px;  
            border-style:solid;  
            border-color:red;  
        \}  
        border-style: dashed（虚线）| dotted（点线）| solid（实线）  
        border-color:\#888;    //前面的井号不要忘掉。  
        border-width: 有 thin | medium | thick（但不是很常用），最常还是用象素（px）  
    2. 上下左右边框：  
        div\{border-bottom:1px solid red;\} /\*top、bottom、left和right\*/  
    3. 高度和宽度  
        div\{  
            width:200px;    /\*宽度\*/  
            height:30px;    /\*高度\*/  
            padding:20px;   /\*元素到边框的距离，又名为“填充”\*/  
            border:1px solid red;  
            margin:10px;    /\*两盒子距离，又名为“边界”\*/  
        \}  
  
19. CSS 布局模型  
    元素有三种布局模型：  
    1、流动模型（Flow）  
        网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的  
        第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%  
        第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示  
    2、浮动模型 (Float)  
        现在我们想让两个块状元素并排显示  
        任何元素在默认情况下是不能浮动的，但可以用CSS定义为浮动，如div、p、table、img等元素都可以被定义为浮动  
        举例：  
            \#div1\{float:left;\}  
            \#div2\{float:right;\}  
    3、层模型（Layer）  
        就像是图像软件PhotoShop中非常流行的图层编辑功能一样，每个图层能够精确定位操作，但在网页设计领域，由于网页大小的活动性，层布局没能受到热捧  
        层模型有三种形式：  
            1、绝对定位(position: absolute)  
                需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来  
                然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位  
                如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口  
                举例：  
                    div\{  
                        xxxx:yyyy;  
                        position:absolute;  
                        right:100px;  
                        top:20px;  
                    \}  
            2、相对定位(position: relative)  
                position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置  
                相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，  
                然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动  
                举例：  
                    \#div1\{  
                        width:200px;  
                        height:200px;  
                        border:2px red solid;  
                        position:relative;  
                        left:100px;  
                        top:50px;  
                    \}                      
                    <div id="div1"></div>  
            3、固定定位(position: fixed) 如弹窗广告  
                fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身  
                它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，  
                因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响  
                举例：  
                    \#div1\{  
                        width:200px;  
                        height:200px;  
                        border:2px red solid;  
                        position:fixed;  
                        left:100px;  
                        top:50px;  
                    \}  
            Relative与Absolute组合使用：  
                1、参照定位的元素必须是相对定位元素的前辈元素  
                <div id="box1">  
                    <div id="box2">相对参照元素进行定位</div>  
                </div>  
                2、参照定位的元素必须加入position:relative;  
                \#box1\{  
                    width:200px;  
                    height:200px;  
                    position:relative;          
                \}  
                3、定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了  
                \#box2\{  
                    position:absolute;  
                    top:20px;  
                    left:30px;           
                \}  
  
20. 代码简写：  
    1. 盒模型：      
        margin:10px; 相当于 margin:10px 10px 10px 10px; （上右下左顺序）  
        margin:10px 40px; 相当于 margin:10px 40px 10px 40px; （上右 下左顺序）  
        padding, border和 margin是一致的；  
    2. 颜色值：  
        p\{color:\#000000;\} 相当于 p\{color: \#000;\}  
        p\{color: \#336699;\} 相当于 p\{color: \#369;\}  
    3. 字体：  
        body\{  
            font-style:italic;  
            font-variant:small-caps;  
            font-weight:bold;  
            font-size:12px;  
            line-height:1.5em;  
            font-family:"宋体",sans-serif;  
        \}  
        编写为：  
            body\{font:italic  small-caps  bold  12px/1.5em  "宋体",sans-serif;\}  
        注意：  
            1、使用这一简写方式你至少要指定 font-size 和 font-family 属性，其他的属性未指定将自动使用默认值。  
            2、在缩写时 font-size 与 line-height 中间要加入“/”斜扛。  
  
21. 长度值  
    1. 像素px  
        像素为什么是相对单位呢？因为像素指的是显示器上的小点（CSS规范中假设“90像素=1英寸”）  
    2. em  
        假定 font-size设定 14px，那么 1em=14px  
    3. 百分比  
        p\{font-size:12px;line-height:130%\}