首页手记 html/css基础笔记（菜鸟整理）
html/css基础笔记（菜鸟整理）

标签：
Html/CSS
html/css基础笔记
HTML+CSS基础课程，笔记
8天前354浏览0评论

<head>网页头部</head>
<title>网页标签</title>

----------------------------------------------------------------------------

<body> 网页身体 </body>
段落标签：<p> test </p>
        引用标签：<q> 引用文本</q>   *###简短文本的引用，自动加上双引号*

段落引用： <blockquote>引用文本</blockquote>  
           #段落文本的引用，自动缩进，自动加上双引号，外层无需添加<p> </p>

空标签：没有HTML内容的标签就是空标签，空标签只需要写一个开始标签
       #空格
    <br /> #换行。html 中是忽略回车和空格的
    <hr /> #水平横线。
    <img />

代码标签：<code>代码语言</code> #简短的代码
代码标签：<pre>语言代码段</pre> #主要作用:预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符

ul-li标签：ul-li是没有前后顺序的信息列表。每项li前都自带一个圆点。
        <ul>
              <li>精彩少年</li>
              <li>美丽突然出现</li>
        </ul>
ol-li标签：每项ol前都自带数字
        <ol>
              <li>精彩少年</li>
              <li>美丽突然出现</li>
        </ol>
----------------------------------------------------------------------------
div标签：<div>排版容器</div> #为网页划分独立的版块
div命名：<div  id="版块名称">…</div>
----------------------------------------------------------------------------
table标签：表格。table表格在没有添加css样式之前，在浏览器中显示是没有表格线的
创建表格的四个元素：table、tbody、tr、th、td
1、<table>…</table>：整个表格以<table>标记开始、</table>标记结束。
2、<tbody>…</tbody>：当表格内容非常多时，表格会下载一点显示一点，但如果加上<tbody>标签后，这个表格就要等表格内容全部下载完才会显示。如右侧代码编辑器中的代码。
3、<tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。
4、<td>…</td>：表格的一个单元格，一行中包含几对<td>...</td>，说明一行中就有几列。
5、<th>…</th>：表格的头部的一个单元格，表格表头。
6、表格中列的个数，取决于一行中数据单元格的个数。

表格摘要：<table summary="表格简介文本"> #不会被显示
表格标题：<caption>标题文本</caption> #显示位置在表格上方
----------------------------------------------------------------------------
超链接标签：<a>
---鼠标悬浮显示文字 title="text"
    <a  href="目标网址"  title="鼠标滑过显示的文本">链接显示的文本</a>
---在新窗口打开超链接 target="_blank"
    <a href="目标网址" target="_blank">链接显示的文本</a>
---发送邮件 mailto:email@aa.com? subject=邮件主题 & body=邮件内容
    <a href="mailto:email@aa.com? subject=邮件主题 & body=邮件内容">链接显示的文本</a>
----------------------------------------------------------------------------
插入图片<img>  #没有对应结尾标签
    <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="图片地址" alt="下载失败时的替换文本" title = "提示文本">
1、src：标识图像的位置；
2、alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；
3、title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；
----------------------------------------------------------------------------
表单标签
    <form   method="传送方式"   action="服务器文件">
        1.<form> ：<form>标签是成对出现的，以<form>开始，以</form>结束。
        2.action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。
        3.method ： 数据传送的方式（get/post）。
例：
<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>
！！！所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在<form></form>标签之间（否则用户输入的信息可提交不到服务器上）
！！！数据传送的方式建议用post。
---------------------------------
文本密码输入框：
    <form>
           <input type="text/password" name="名称" value="文本" />
    </form>
1、type：
    当type="text"时，输入框为文本输入框;
    当type="password"时, 输入框为密码输入框。
2、name：为文本框命名，以备后台程序ASP 、PHP使用。
3、value：为文本输入框设置默认值。(一般起到提示作用)
举例：
<form>
  姓名：
  <input type="text" name="myName">
  <br/>
  密码：
  <input type="password" name="pass">
</form>
---------------------------------
文本域：支持多行文本输入<textarea>

单选框，复选框：radio/checkbox
    <input   type="radio/checkbox"   value="值"    name="名称"   checked="checked"/>

下拉列表框，节省空间：<select> </select>
下拉列表框多选：<select multiple="multiple"> </select>

提交按钮，提交数据：<input   type="submit"   value="提交">
重置按钮，重置表单信息：<input type="reset" value="重置">

form表单中的label标签：<label for="控件id名称"> </label>
注意：标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。
<form>
  <label for="male">男</label>
  <input type="radio" name="gender" id="male" />
  <br />
  <label for="female">女</label>
  <input type="radio" name="gender" id="female" />
  <label for="email">输入你的邮箱地址</label>
  <input type="email" id="email" placeholder="Enter email">
</form>

=========================================
CSS
=========================================
CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。
使用CSS样式的一个好处是通过定义某个样式，可以让不同网页位置的文字有着统一的字体、字号或者颜色等。
CSS加在<head>网页头部</head>里。
--------------------------------------------------------------------
<span></span> 快速修改段落部分文字的颜色。
1. <body>里添加<span>需要变色的文字</span>
2.<head>里添加CSS样式span{color:red; }
--------------------------------------------------------------------
CSS代码语法
CSS注释代码：/*注释语句*/
Html注释代码：<!--注释语句-->
--------------------------------------------------------------------
CSS 样式代码插入的形式：内联式、嵌入式、外部式
        !!!内联式：把css代码直接写在现有的HTML标签中。
        <p style="color:red">这里文字是红色。</p>  
        注意要写在元素的开始标签里，并且css样式代码要写在style=""双引号中
        !!!嵌入式：在<head>部分把css样式代码写在<style type="text/css"> </style>标签之间
        !!!外部式：把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名。在<head>内，使用<link>标签将css样式文件链接到HTML文件内。
        <link href="base.css" rel="stylesheet" type="text/css" />
            注意：
            1、css样式文件名称以有意义的英文字母命名，如 main.css。
            2、rel="stylesheet" type="text/css" 是固定写法不可修改。

三种方法的优先级：内联式 > 嵌入式 > 外部式（-就近原则：离被设置元素越近优先级别越高）
------------------------------------------------
什么是选择器：在{}之前的部分就是“选择器”，作用对象，也就是“样式”作用于网页中的哪些元素。
    选择器{
        样式;
    }

标签选择器：其实就是html代码中的标签。<body>、<h1>、<p>、<img>
类选择器：  .类选器名称{css样式代码;}
        类选择器在css样式编码中是最常用到的，（可以设置<span>不同颜色）
        1、英文圆点开头
        2、其中类选器名称可以任意起名（但不要起中文噢）
        例：<span class="stress">胆小如鼠</span>
                <head>的CSS设置中插入 .stress{color:red;}

ID选择器：在很多方面，ID选择器都类似于类选择符，但也有一些重要的区别：
        1、为标签设置id="ID名称"，而不是class="类名称"。
        2、ID选择符的前面是井号（#）号，而不是英文圆点（.）。

类和ID选择器的区别：
相同点：可以应用于任何元素
不同点：
    1、ID选择器只能在文档中使用一次。而且仅一次。而类选择器可以使用多次。
     <span class="stress">胆小如鼠</span>的小女孩，就一直没有这个<span class="stress">勇气</span>来回答
    2、可以使用类选择器词列表方法为一个元素同时设置多个样式。ID选择器是不可以的（不能使用 ID 词列表）。
     <span class="stress bigsize">三年级</span>
点击查看更多内容