html+css基础篇

[王子豪]

HTML5

https://developer.mozilla.org/en-US/docs/Web/HTML

超文本标记语言

非编程语言：告诉浏览器如何构造网页

<!DOCTYRE html>
<html>
    <head>
        
    </head>
    <body>
        
    </body>
</html>

 

head内：

在这里可以放一些搜索引擎的关键字或者一些网页的基本信息

例如使用title标签来在标题栏显示这个网页的标题

 

body内：

在这里放置真正想给用户看的内容

 

<h1>这是h1显示的标题</h1>
<h2>这是h2显示的标题</h2>
<h3>这是h3显示的标题</h3>
<h4>这是h4显示的标题</h4>
<h5>这是h5显示的标题</h5>
<h6>这是h6显示的标题</h6>

​

这是h1显示的标题

这是h2显示的标题

这是h3显示的标题

这是h4显示的标题

这是h5显示的标题

这是h6显示的标题

​

<p>这是段落标签</p>

​

这是段落标签

​

 

块级元素

·在页面以块的形式展现

·出现在新的一行

·占全部宽度

 

内联元素

·通常在块级元素内

·不会导致文本换行

·只占必要的部分宽度

 

文本

超链接

<a href="https://baidu.com">百度超链接</a>

百度超链接

 

strong标签进行文本加粗显示

<strong>在这里进行了加粗</strong>

在这里进行了加粗

 

em标签进行文本斜体显示

<em>这里被斜体显示</em>

这里被斜体显示

 

列表

无序ul

<ul>
   <li>List Item 1</li> 
    <li>List Item 2</li> 
    <li>List Item 3</li> 
    <li>List Item 4</li> 
    <li>List Item 5</li> 
</ul>

​

• List Item 1
• List Item 2
• List Item 3
• List Item 4
• List Item 5

​

 

有序

<ol>
   <li>List Item 1</li> 
    <li>List Item 2</li> 
    <li>List Item 3</li> 
    <li>List Item 4</li> 
    <li>List Item 5</li> 
</ol>

​

1. List Item 1
2. List Item 2
3. List Item 3
4. List Item 4
5. List Item 5

​

 

表格

table标签：

所有对表格进行操作渲染的都要被包裹在table标签内

thead标签显示表头部分，使用th标签操作表头元素

tbody标签显示内容部分，使用td标签操作单个元素

tr标签表示新创建一行表格

<table>
    <thead>
        <tr>
            <th>这里是表头1</th>
           <th>这里是表头2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>元素11</td>
            <td>元素12</td>
        </tr>
        <tr>
            <td>元素21</td>
            <td>元素22</td>
        </tr>
    </tbody>
</table>

​

这里是表头1	这里是表头2
元素11	元素12
元素21	元素22

​

 

表单

 

<form>
    <div>
        <label>First Name</label>
        <input type="text" name="firstname" placeholder="Enter First Name">
    </div>
    <div>
        <label>Last Name</label>
        <input type="text" name="lastname" placeholder="Enter lest Name">
    </div>
    <div>
        <label>Email Name</label>
        <input type="text" name="email" placeholder="Enter Email">
    </div>
    <input type="submit" name="submit" value="Submit">
    <br>
    <button>
        这是一个按钮
    </button>
</form>

​

First Name 

Last Name 

Email 

 
这是一个按钮     

​

 

图片

style可以规定图片的大小之类的信息

src处填写图片的存放地址

alt处的信息会在图片加载不出来的时候给予用户提示

<img style="width:***px height=***px" src="img/pic.jpg" alt="this">

 

引用

blockquote标签包裹的内容会成为引用的一句话

<blockquote>
    这是一句话---鲁迅
</blockquote>

​

这是一句话---鲁迅

​

 

abbr标签可以使文字隐藏显示

<p>
    <abbr title=“嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿”>嘿嘿嘿。。。</abbr>这是另一句话
</p>

​

嘿嘿嘿。。。这是另一句话

​

cite标签包裹的句子会呈现名言引用的效果

<p>
    <cite>学习永无止境</cite>--鲁迅
</p>

​

学习永无 止境——鲁迅

 

​

css

层叠样式表

不是编程语言

告诉浏览器如何指定样式、布局等

https://developer.mozilla.org/en-US/docs/Web/CSS TypeIsBeautiful: https://thetype.com

 

 

<p>
    This is a apple
</p>

p{
    color:red;
}

p为选择器——指的是上方的p标签

color为属性

red为color这个属性的值

所有的属性和值都必须放置在选择器后方的花括号里，且每一个属性赋值结束后都必须使用分号结尾

 

为html添加css的三种方式

• 外部样式表：

  css保存在.css文件中

  在html里使用<link>引用

  <head>
      <link href="./***.css">
  </head>

   

   

• 内部样式表：

  不使用外部css文件

  将css放在html的头标签head的《style》里

  <head>
      <style>
          h1 {
          color:red;
          }
      </style>
  </head>
  <body>
      <h1>
          我是一句话
      </h1>
  </body>

 

• 内联样式（不推荐）

  仅影响一个元素

  在html元素的《style》属性中添加

<h1 style="color:red">
    我是一句话
</h1>

​

我是一句话

​

 

三种基础选择器

<p class="paragraph" id="para1" >
    lorem
</p>

 

• 使用标签操作

p{
    color:red;
}

• 使用类class操作

不局限于一种标签，直接操作整个类，不唯一

.paragraph{
    color:red;
}

• 使用id操作

id在一个html文件中唯一

#para1{
    color:red;
}

css中的颜色

关键字：black，silver，white

RGB：rgb（255,0,0)

RGBA: rgb(255,0,0,0.5)

十六进制值：#ff0000

HSL：hsl（0，100%，50%）

HSLA：hsl（0，100%，50%，0.5）

盒子模型

内边距（padding）：

内容到边框的距离

 

外边距（margin）：

和外部内容进行接触的部分

当两个盒子模型放在一起的时候，两个盒子的外边距不会相加，而是会取两个外边距的最大值

边框（border）：

内边距与外边距之间的就是边框，可被定义宽度等元素

 

p {
    margin-top:5px;
    margin-botton:5px;
    margin-right:10px;
    margin-left:10px;
}

另类的表示方式：

上右下左

p{
    margin:5px 10px 5px 10px;
}

上下 左右

p{
    margin:5px 10px;
}

上 左右 下

p{
    margin:5px 10px 5px;
}

改变颜色

.box{
    border:5px blue solid;
    border-right:10px red solid;
}

边框加圆角

p{
    border-redius:15px;
}

导入图片

.list li{
    list-style:square;
    list-style-image:url('../image/check.jpg');
}

状态

当鼠标放上去会改变 hover

button:hover{
    background-color:red;
}

按下的状态 active

button:active{
    background-color:#fff;
}

超链接

访问过了一个超链接之后会变色

a:vistived{
    colorL:red;
}

并排

p{
    float:left;         //靠左排列
    width:33.3%;        //定义这段文字的宽度
    border：1px solid #ccc;      //为每段文字添加边框，这样可能会导致有一段文字被挤出这一列
    bos-sizing:border-box;      //这样可以解决上面的问题
}

排版之后添加这个防止浮动串行

.lll{
    clear:both;
}

定位

position

static——静态定位

relative——相对定位

absolute——绝对定位

fixed——固定定位

sticky——随着窗口移动，但是移动到某一位置就会停止

.position{
    top:50px;
    right:60px;
    left:50px;
    button:50px;
}