html

最新推荐文章于 2024-07-25 11:26:35 发布
最新推荐文章于 2024-07-25 11:26:35 发布
阅读量240 收藏
点赞数
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MintHelen/article/details/107964014
版权

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> 2019年1月1日</td>
              <td> 云彩</td>
              <td> 天气晴朗，适合出行</td> 
          </tr>
          <tr>
              <td> 2019年1月2日</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" > 2019年1月1日</td>
              <td> 白天</td>
              <td> 云彩</td>
              <td> 天气晴朗，适合出行</td> 
          </tr>
          <tr> 
            
            <td> 夜晚</td>
            <td> 云彩</td>
            <td> 天气晴朗，适合出行</td> 
          </tr>
          
          <tr >
              <td rowspan = "2"> 2019年1月2日</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背景样式

一级标题

一级标题

一级标题

一级标题

MintHelen
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
HTML星空特效
兔子王
06-19 4万+
100行代码实现HTML星空特效。
圣诞树代码 html
m0_73309780的博客
12-04 6万+
圣诞树 html
程序员的浪漫------下雪氛围圣诞树源码
weixin_64050318的博客
01-19 6万+
氛围圣诞树，雪花和圣诞树灯光会随音乐节奏闪动，音乐可自主选择，什么歌曲都可以
linux 终端打印圣诞树,1021字节javascript写成的3D圣诞树
weixin_33390343的博客
05-07 1341
源码如下：JS1k, 1k demo submission [856]var b = document.body;var c = document.getElementsByTagName('canvas')[0];var a = c.getContext('2d');document.body.clientWidth; // fix bug in chrome.// start of subm...
HTML期末设计——代码篇
greengirl5的博客
06-22 13万+
事先声明 这个网页设计也就是用了我学到的知识做的一个中规中矩的网页，可以给以后的大一新生们做个参考，和商业网站的效果肯定是没得比的，期望太高的可以关掉了 引入页 效果图： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>欢迎来到香氛密语</title> <style>
HTML入门与进阶以及HTML5
热门推荐
wuyxinu的博客
12-12 38万+
目录 一、简介 1、前端开发最核心技术 （1）HTML是什么？ （2）CSS （3）JavaScript 2、前端开发其他技术 二、基础内容 1.基础总结 2.HTML的基本标签 (1)HTML标签 (2)head标签 (3)body标签 3、段落与文字 (一)、段落标签 (二)、网页特殊符号 (三)、自闭合标签 (四)、块元素和行内元素 (五)、练...
制作一个简单HTML个人网页网页（HTML+CSS）
weixin_46153254的博客
12-04 35万+
制作一个简单的HTML个人网页
HTML零基础入门教程（详细）
ZONGXP的博客
10-22 22万+
HTML 是用来描述网页的一种语言。HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。 HTML 指的是超文本标记语言:HyperTextMarkupL...
使用HTML制作一个简单的个人主页
indulgexiaomei的博客
10-09 20万+
此网页我对html有了一个简单，初步的认识后制作的一个网页，主要目的是练习html的一些简单操作，由于时间关系，有很多做的不好，细节处理不到位的地方。 废话不多说，先来看效果 1、首页 这一个网页就是进行了网页背景、背景音乐、段落的处理、水平线以及超链接的简单练习。 2、我的相册 这一页主要是对大量图片进行一个排版的练习 3、我的计划 这一页主要是对文本有序无序以及表格内部的背景颜色等等的练习 4、我的家乡 这一部分是对段落、还有文本与图片结合的练习 5、我的故事 这个是对表格进阶版的练习，文字
一套后台管理html模版
08-04
【标题】：“一套后台管理html模版” 这套后台管理HTML模板是专为构建高效、功能丰富的后台管理系统界面设计的。HTML模版是前端开发的基础，它定义了网页的结构和样式，使得开发者能够快速搭建出美观且易于操作的...
HTML动态爱心代码爱心满屏
11-07
HTML动态爱心代码满屏爱心免费下载
网上订餐系统模板html源码
06-11
网上订餐系统模板HTML源码是一个用于构建在线订餐平台的前端资源，它包含了实现基本功能所需的HTML文件。由于描述中提到该源码是静态的，这意味着它不包含任何服务器端代码或与数据库的交互，因此它主要用于展示界面...
纯HTML网页源码
11-02
HTML，全称HyperText Markup Language，即超文本标记语言，是构建互联网页面的基础。它是一种标记语言，通过一系列标签来描述网页的结构和内容。"纯HTML网页源码"指的是只包含HTML代码，不依赖其他如JavaScript、CSS...
爱心代码 李峋同款爱心等免费下载 exe、py、html格式
11-12
【标题】"爱心代码 李峋同款爱心等免费下载 exe、py、html格式" 提供了一组与编程相关的资源，这些资源包含了不同格式的爱心图案实现，包括可执行文件（exe）、Python脚本（py）以及HTML页面（html）。这暗示我们...
Web前端：HTML篇（一）
sjb2274540432的博客
07-22 1043
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。
html实现酷炫美观的可视化大屏(十种风格示例，附源码)
最新发布
xcLeigh
07-25 2316
html实现酷炫美观的可视化大屏(十种风格示例，附源码)，大屏源码，可视化大屏模板源码，html可视化大屏源码下载，内含十种不同风格的大屏可视化代码，详细的讲解，酷炫的线条，美观的设计，让图文图表结合的更融洽。兼容各种大屏，调整页面到合适的分辨率，F12全屏观看。各种风格都有，代码上手简单，代码独立，可以直接使用。也可直接预览效果。
Html在图片上划一个矩形区域，并且获取区域坐标
zxb11c的博客
07-25 205
【代码】Html在图片上划一个矩形区域，并且获取区域坐标。
HTML常见标签——超链接a标签
weixin_64294248的博客
07-23 707
a>标签用于做跳转、导航，是双标签，记作，它是行内标签，不可以直接设置宽度高度，特殊的是，作为行内标签，它可以嵌套文本、行内元素、块级元素。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值