html

html

一.光标使用

1.alt  出现多光标 
2.ctrl + d 选择相同元素的下一个

二.初始代码

!+Table   补全框架代码

三.标题与段落

<h1>标题</h1>
<h2>标题</h2>
<h3>标题</h3>
<h4>标题</h4>
<h5>标题</h5>
<h6>标题</h6>
<P>这是一个段落</P>

在这里插入图片描述

四.文本修饰标签

<strong></strong>  加粗
<em></em>          斜体
<sub></sub>        下标文本
<sup></sup>        上标文本
<del>  <ins>  删除文本  插入文本
    <p>
    <strong>这是一段需要强调的文字</strong>
     <em>这是一段需要强调的文字</em>
    </p>
    <p>
        a <sup>2</sup> + b <sup>2</sup> = c <sup>2</sup>
        H<sub>2</sub>O
    </p>
     <p>
        促销:原价<del>300</del>,现价<ins>100</ins>
    </p>

在这里插入图片描述

五.图片标签与图片属性

<img src="" alt=""  title="这是一张图片的提示信息">
alt 在图片地址出错时显示的文字
title 鼠标移到图片上显示的文字
width = "300" heigth ="300" 调整图片长宽

六.跳转链接

  <a href="http://www.baidu.com" target = " _blank">访问百度</a>
   target = " _self" 在当前页面打开
   target = " _blank" 新窗口打开

   使用base 标签  让所有链接都在新窗口打开
   <head>
     <base target = "_blank">
   </head>

访问百度
访问百度

七.跳转锚点

<body>
   <a href = "#html" > HTML </a>
   <h2 id = "html"> 超文本标记语言</h2>
</body>  //到达某一位置

<body>
   <a href = "#html" > HTML </a>
   <a name = "html"> 超文本标记语言</a>
</body>  //可用于到达底部

八.特殊符号

&nbsp  空格符
&lt ; 大于号
&gt; 小于号

9.无序列表

<ul> <li> 组合出现 ,之间不能有其他标签

10.有序列表

<ol> <li> 有序列表用的很少,无序可替换有序

11.定义列表

<dl> :定义列表
<dt> : 定义专业术语或名词
<dd>: 对名词进行解释和描述

12.嵌套列表

       <ul>
           <li>
               河南省
               <ul>
                   <li>南阳</li>
                   <li>洛阳</li>
                   <li>西峡</li>
               </ul>
           </li>
       </ul>

在这里插入图片描述

<dl>
         <dt> 中国</dt>
         <dd>
             <dl>
                 <dt>辽宁省</dt>
                 <dd>沈阳</dd>
                 <dd>大连</dd>
                 <dd>丹东</dd>
             </dl>
         </dd>
</dl> 

在这里插入图片描述

13.表格标签

<table >表格的最外层容器
<tr> 定义表格行
<th> 定义表头
<td> 定义表格单元
<caption> 定义表格标题
语义化标签 : thead tbody tfood 
tbody 可以多次出现  Thead 和tfood 只能出现一次


      <table>
          <caption> 天气预报</caption>
          <tHead>
          <tr>
              <th>日期</th>
              <th>天气情况</th>
              <th> 出行情况</th>
          </tr>
        </tHead>
        <tBody>
          <tr> 
              <td> 201911</td>
              <td> 云彩</td>
              <td> 天气晴朗,适合出行</td> 
          </tr>
          <tr>
              <td> 201912</td>
              <td> 下雨</td>
              <td> 有小雨,出门带伞</td>
          </tr>
        </tBody>
        <tFoot>
            
        </tFoot>
      </table>

在这里插入图片描述

14.表格属性

border  表格边框
cellpadding 单元格内的空间
cellspacing 单元格之间的空间
rowspan 合并存
colspan 合并列
align 左右对齐方式
valign 上下对齐方式  


      <table border = "1"  cellpadding = "30" cellspacing = "30">
          <caption> 天气预报</caption>
          <tHead>
          <tr>
              
              <th colspan="2"> 日期</th>
              <th>天气情况</th>
              <th> 出行情况</th>
          </tr>
        </tHead>

        <tBody>
          <tr> 
              <td rowspan = "2" > 201911</td>
              <td> 白天</td>
              <td> 云彩</td>
              <td> 天气晴朗,适合出行</td> 
          </tr>
          <tr> 
            
            <td> 夜晚</td>
            <td> 云彩</td>
            <td> 天气晴朗,适合出行</td> 
          </tr>
          
          <tr >
              <td rowspan = "2"> 201912</td>
              <td> 白天</td>
              <td> 下雨</td>
              <td> 有小雨,出门带伞</td>
          </tr>
          <tr>
            
            <td> 夜晚</td>
            <td> 下雨</td>
            <td> 有小雨,出门带伞</td>
        </tr>

        </tBody>
       
        <tFoot>

        </tFoot>
      </table>

在这里插入图片描述

15.表单标签

 <form> :表单的最外层容器
 <input>展示控件
  <form action = "">
        <!-- action用于提交页面 -->
        <h2>输入框:</h2>
        <input type = "text" placeholder="请输入用户名">
        <h2>密码框:</h2>
        <input type = "password" placeholder="请输入密码">
        <h2>复选框</h2>
        <input type = "checkbox">苹果
        <input type = "checkbox" checked>樱桃 提前选中
        <input type = "checkbox" disabled>梨子 禁止使用
        <input type = "checkbox">香蕉
        <input type = "checkbox">葡萄
        <h2> 单选框</h2>
        <input type = "radio" name = "gender"><input type = "radio" name = "gender"><h2> 上传文件</h2>
        <input type = "file">
        <h2> 提交按钮和重置按钮</h2>
        <input type = "submit">
        <input type = "reset">

    </form>

在这里插入图片描述

  <form action = "">
       
         <h2>下拉菜单</h2> 
         <select> 
             <!-- <option selected disabled> 请选择 </option> -->
             
             <option> 北京</option>
             <option selected> 上海</option>
             <option> 杭州</option>
             <option> 南阳</option>
         </select>
         <select size = "3"> 
             <!-- 一次可以显示多个 -->
            <option> 北京</option>
            <option selected> 上海</option>
            <option> 杭州</option>
            <option> 南阳</option>
        </select>
        <select multiple> 
            <!-- multiple可以多选 -->
            <option> 北京</option>
            <option selected> 上海</option>
            <option> 杭州</option>
            <option> 南阳</option>
        </select>
        <input type = "file" multiple>
        <input type = "radio" name = "gender" id ="man"><label  for = "man"></label>
        <input type = "radio" name = "gender" id = "woman"><label for = "woman"></label>
       <!-- label辅助标签 点击男或女也可以选中 -->
    </form>

在这里插入图片描述

16.表单表格组合使用

  <form action = "">
         <table border = "1" cellpadding = "30">
               <tbody>
                   <tr  align="center">
                       <td rowspan = "4"> 总体信息 </td>
                       <td colspan="2">用户注册</td>
                   </tr>
                   <tr align="right">
                        <td>  用户名:</td>
                        <td> <input type = "text" placeholder="请输入用户名"></td>
                    </tr>
                    <tr align="right">
                        <td> 密码:</td>
                        <td><input  type = " password" placeholder="请输入密码"></td>
                    </tr>
                    <tr align="center">
                        <td colspan="2"> 
                            <input type = "submit">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <input type = "reset">
                        </td>
                    </tr>
               </tbody>
         </table>
     </form>

在这里插入图片描述

17.div 与 span

div 用来划分区域   span修饰文字

18.CSS语法格式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
            div{ width : 100% ; height : 100%; background-color :red}
           span{background-color: blue;}  
    </style>
</head>
<body>
     <div>这是一个块</div>
     <div> 又是一个块</div>
     <span> 这是一个内联</span>   
</body>
</html>

在这里插入图片描述

18.css引入方式

1.内联样式 
     style 属性
       <div style = " width :100px ; height : 100px ; background-color: red;"> 这是一个块</div>
2. 内部样式
      style 标签
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
            div{ width : 100% ; height : 100%; background-color :red}
           
    </style>
</head>
<body>
        
        <div>这是一个块</div>
    </body>
</html>     
     

在这里插入图片描述

区别:内部样式代码可以复用
3.外部样式
引入一个单独的css文件,name.css 
通过link 标签引入外部资源,rel 属性指定资源跟页面的关系,href属性资源的地址

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./common.css">
    <title>Document</title>
</head>
<body>
    <div>  这是一个块</div>
</body>
</html>



css
div{  width: 100px ; height : 100px; background-color: red}

19.css颜色表示法

1.颜色表示法
单词
2.十六进制表示法
0 1 2 3 4 5 6 7 8 9
#ffffff
3.rgb 三原色表示法 rgb(255,255,255)

20.css背景样式

一级标题

一级标题

一级标题

一级标题

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值