前端Web基础（html+css）-优快云博客

Web标准

又称网页标准

三个组成部分：

HTML：负责网页的结构（页面元素和内容）。

CSS：负责网页的表现（页面元素的外观、位置的页面样式，如：颜色、大小）。

JavaScript：负责页面的行为（交互效果）。

什么是HTML：超文本标记语言

超文本：超越文本限制，除了表示文字还可以定义图片，音乐，视频。

· 标记语言：由标签 " <>" 构成的语言。

什么是CSS

css：叠层样式表，用于控制页面的样式（表现）。

基本骨架

<!DOCTYPE html>
<html >
    <head>
        <title>标题</title>
    </head>
    <body>
      
    </body>
</html>

标题标签

超链接标签

点击跳转页面

href：指定资源访问url

<a href="https://www.baidu.com">  点击导航到百度</a>
<!-- target="_self"可以不写 默认就是打开自身页面  -->
<a href="https://www.baidu.com" target="_self">02.新闻</a>
<!-- target="_blank" 设置新窗口打开  -->
<a href="https://www.baidu.com"  target ="_blank">  点击导航到百度</a>

target:设置打开方式

_blank:新窗口打开

_self: 本窗口打开（默认）

样式

css引入方式

//方式一 行内颜色
<html >
    <head>      
      <title>标题</title> 
    </head>
    <body>
        <span style="background-color:red;" >222</span>
    </body>
</html>

//方法二 内部样式
<html >
    <head>      
      <title>标题</title> 
      <style>
            span{
                color: red;
            }
        </style>
    </head>
    <body>
        <span  >222</span>
    </body>
</html>


//方法三  外部样式

//创建一个css文件夹，创建一个news.css
news.css

 span{
      color: red;
    }


////在HTML文件引入css文件
<html >
    <head>      
      <title>标题</title> 
        //引入css文件
      <link rel ="stylesheet" href=" css/news.css">
      <style>
         
       </style>
    </head>
    <body>
        <span  >222</span>
    </body>
</html>

颜色的表示

<html >
    <head>      
      <title>标题</title> 
      <style>
            span{
              /* 关键字表示法 */
                color: red;

              /* RGB表示法 */
                color: rgb(255,0,0);

              /* 十六进制表示法 */
                color: #ff0000;

              /* RGBA表示法*/
                color: rgba(255,0,0,1);
            }
        </style>
    </head>
    <body>
    </body>
</html>

颜色属性

color：设置文本颜色

CSS选择器

用来设置样式的元素的例如首行缩进居中

三个选择器的优先等级： id >类 >元素

设置超链接无下划线

<!DOCTYPE html>
<html >
    <head>      
      <title>标题</title> 
      <style>
          /* * 这是一个元素选择器*/
            span{
                color: red;
              
            }
        /* * 这是一个类选择器*/
            .clss{
                color: blue;
                font-size: 18px;
              }
              /* 这是一个id选择器 */
            #idd{
                 color: purple;
              }
                /* 设置超链接无下划线 */
            a{
                /* 设置首行缩进 */
                text-height:2em;
                text-decoration: none;
              }


        </style>
    </head>
    <body>
        <span  >222</span>
        <span  class="clss">111</span>
        <span  id="idd">333</span>
        <a href="https://www.baidu.com">  点击导航到百度</a>
    </body>
</html>

扩充

表单标签<form>

负责信息采集如注册登录

表单项

<input> 表单项，通过设置type属性控制输入形式

text 文本输入

password 密码输入

radio 单选按钮

checkbox 复选框

date time datetime-local 日期时间

file 文件

<form>
        <!-- 文本输入 -->
        <p><input type="text" placeholder="张无忌"></p>

        <!-- 密码输入 -->
        <p><input type="password"></p>

        <!-- 单选按钮 -->
        <p>
            <label><input type="radio" name="gender"> 男</label>
            <label><input type="radio" name="gender"> 女</label>
        </p>

        <!-- 复选框 -->
        <p>
            <label><input type="checkbox"> Java</label>
            <label><input type="checkbox"> Game</label>
        </p>

        <!-- 文件上传 -->
        <p><input type="file"></p>

        <!-- 日期时间选择 -->
        <p><input type="date"></p>
        <p><input type="time"></p>
        <p><input type="datetime-local"></p>

        <!-- 隐藏域（不可见） -->
        <input type="hidden" value="hidden-value">

        学历:
        <select name ="degree">
            <option value="1">本科</option>
            <option value="2" >专科</option>
            <option value="3">研究生</option>
        </select>

        <!-- 按钮 -->
        <p>
            <button type="submit">提交</button>
            <button type="reset">重置</button>
            <button type="button" onclick="alert('按钮被点击')">按钮</button>
        </p>
    </form>

<select>定义下拉列表

<textarea> 定义文本域

属性

action：规定当表单提交向何处发送表单1数据 URL

methon：规定提交方式

GET放的url后面：不安全、请求大小有限

POST放到请求体里，安全、请求大小无限

submit 提交按钮

必须要有name属性，才能将值上传

<form action="/index.html" method="post">
    <input type="text" name="name" placeholder="请输入姓名">
    <input type="submit" value="提交">
    <form>
      <input type="text" name="email" placeholder="请输入邮箱">
      <input type="submit" value="发送">
  </form>
  </form>

其他标签

//视频标签 autoplay 自动播放  controls视频控件
<video src="video/4k1080p.mp4" autoplay="autoplay" width="720" height="360" controls="controls"></video>

//段落标签
<p>  文字 </p>

//换行符
<br>

<!-- 
   图片标签
     src图片访问地址
        分为绝对路径
            1.绝对磁盘路径<img src="images/huangguan.jpg" alt="">
            2.绝对网络路径<img src="https://www.baidu.com/img/bd_logo1.png" alt="">
            相对路径
            1. ./ 当前目录
            2. ../ 上一级目录
      width
      height
      -->
<img src="images/huangguan.jpg" alt="">
            <!--绝对网络路径  -->
<img src="https://www.baidu.com/img/bd_logo1.png" alt="">


//加粗标签
<strong>  </strong>

//表示 空格&nbsp;   > &gt   <&lt

盒子模型：布局标签使用 div 和 span

组成内容（content），内边距（padding），边框（border），外边距（margin）

<div>标签默认独占一行

#div1 {
      width: 400px;
      height: 300px;
      background-color: #ffff00;
      padding: 30px;
      box-sizing: border-box;
      border: 20px solid #ff00ff;
      margin: 20px  auto;
    }

flex布局：一维弹性布局 display：flex 设置div内部多个div排列