重温HTML/CSS

傷城~ 2022-01-26 15:27 154阅读 0赞

**目录**

概念

一个简单的HTML

HTML标签

CSS样式

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

# **概念** #

1. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。

2. CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

# 一个简单的HTML #

<!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title> </title>
    </head>
    <body>
        <h1></h1>
        <p></p>
        <p> </p>
    </body>
    </html>

# HTML标签 #

<p>段落文本</p>
    <hx>标题文本</hx> (x为1-6)
    <em>需要强调的文本</em>  
    <strong>需要强调的文本</strong>
    <span>标签是没有语义的，它的作用就是为了设置单独的样式用的。
    <q>引用文本</q>
    <blockquote>引用文本</blockquote>
    <br>标签分行显示文本
     
    <hr>添加水平横线
    <address>联系地址信息</address>
    <code>代码语言</code>
    <pre>语言代码段</pre>
    <ul>
      <li>精彩少年</li>
      <li>美丽突然出现</li>
      <li>触动心灵的旋律</li>
    </ul>
    <ol>
       <li>前端开发面试心法 </li>
       <li>零基础学习html</li>
       <li>JavaScript全攻略</li>
    </ol>
    <div>…</div>相当于一个容器
    <div  id="版块名称">…</div>
    <table>
      <tbody>
        <tr>
          <th>班级</th>
          <th>学生数</th>
          <th>平均成绩</th>
        </tr>
        <tr>
          <td>一班</td>
          <td>30</td>
          <td>89</td>
        </tr>
        <tr>
          <td>二班</td>
          <td>35</td>
          <td>85</td>
        </tr>
      </tbody>
    </table>
    <style type="text/css">
    table tr td,th{border:1px solid #000;}
    </style>
    <caption>标题文本</caption>
    <a  href="目标网址"  title="鼠标滑过显示的文本">链接显示的文本</a>
    target="_blank"在新窗口打开链接
    <img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">
    <form   method="传送方式"   action="服务器文件">
    <textarea  rows="行数" cols="列数">文本</textarea>
    <input   type="radio/checkbox"   value="值"    name="名称"   checked="checked"/>
    <select>
        <option value="看书">看书</option>
        <option value="旅游" selected="selected">旅游</option>
        <option value="运动">运动</option>
        <option value="购物">购物</option>
    </select>
    下拉列表也可以进行多选操作，在<select>标签中设置multiple="multiple"属性
    <input   type="submit"   value="提交">
    <input type="reset" value="重置">

# CSS样式 #

p{
       font-size:12px;
       color:red;
       font-weight:bold;
    }
    <p style="color:red">这里文字是红色。</p>内联式css样式，直接写在现有的HTML标签中
    <link href=”style.css” rel=”stylesheet” type=”text/css”/>
    内联式 > 嵌入式 > 外部式
    
    .类选器名称{css样式代码;}
    #id名称{css样式代码;}
    .food>li{border:1px solid red;} 这行代码会使class名为food下的子元素li（水果、蔬菜）加入红色实线边框。>作用于元素的第一代后代，空格作用于元素的所有后代。
    * {color:red;} 通用选择器
    a:hover{color:red;} 伪类选择符
    h1,span{color:red;} 分组选择符
    
    CSS的某些样式是具有继承性的，那么什么是继承呢？继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。比如：color
    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*/
    简言之，id>class>标签（就近原则）当然组合的权重更高
    我们在做网页代码的时，有些特殊的情况需要为某些样式设置具有最高权值，怎么办？这时候我们可以使用!important来解决。
    font-family:"Microsoft Yahei";
    font-size:20px;color:red;
    a{font-weight:bold;}粗体
    p a{font-style:italic;}斜体
    p a{text-decoration:underline;}下划线
    .oldPrice{text-decoration:line-through;}删除线
    p{text-indent:2em;}缩进
    p{line-height:1.5em;}行间距
    h1{letter-spacing:50px;}字母间距
    h1{word-spacing:50px;}单词间距
    div{text-align:center;对齐
    
    常用的块状元素有：
    <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
    
    常用的内联元素有：
    <a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
    
    常用的内联块状元素有：
    <img>、<input>
    
    什么是块级元素？在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是块级元素。设置display:block就是将元素显示为块级元素。如下代码就是将内联元素a转换为块状元素，从而使a元素具有块状元素特点。
    块级元素特点：
    1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
    2、元素的高度、宽度、行高以及顶和底边距都可设置。
    3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
    
    块状元素也可以通过代码display:inline将元素设置为内联元素。
    
    内联元素特点：
    1、和其他元素都在一行上；
    2、元素的高度、宽度及顶部和底部边距不可设置；
    3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
    
    内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。
    
    padding填充
    margin边界
    
    先来说一说流动模型，流动（Flow）是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。
    流动布局模型具有2个比较典型的特征：
    第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。如右侧代码编辑器中三个块状元素标签(div，h1，p)宽度显示为100%。
    
    任何元素在默认情况下是不能浮动的，但可以用 CSS 定义为浮动，如 div、p、table、img 等元素都可以被定义为浮动。如下代码可以实现两个 div 元素一行显示。
    float：left
    float：right
    
    层模型
    1、绝对定位(position: absolute)
    2、相对定位(position: relative)
    3、固定定位(position: fixed)
    
    不定宽度的块状元素有三种方法居中（这三种方法目前使用的都很多）：
    加入 table 标签
    设置 display: inline 方法：与第一种类似，显示类型设为 行内元素，进行不定宽元素的属性设置
    设置 position:relative 和 left:50%：利用 相对定位 的方式，将元素向左偏移 50% ，即达到居中的目的

\*本文参考慕课网HTML+CSS课程[https://www.imooc.com/learn/9][https_www.imooc.com_learn_9]

[https_www.imooc.com_learn_9]: https://www.imooc.com/learn/9