html常用标签

最新推荐文章于 2024-01-25 22:53:26 发布
原创 最新推荐文章于 2024-01-25 22:53:26 发布 · 220 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

一.标题标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01_标题标签</title>
</head>
<body>
       <h1>标题1</h1>
       <h2>标题2</h2>
       <h3>标题3</h3>
       <h4>标题4</h4>
       <h5>标题1</h5>
       <h6>标题2</h6>
</body>
</html>

二.常用标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2.常用标签</title>
</head>
<body>
      <p>这是一个段落标签</p>
      <!--水平线-->
      <hr/>
      <font face="楷体" color="#6495ed" size="7">这是字体标签</font>
      <!--图像标签-->
      <img width="300" height="400" src="C:\Users\yyy\Documents\Java\html语言入门\src\imgs\20150903094844_WYjsH.jpeg">
      <!--无序列表-->
      <ul type="square">
          <li>苹果</li>
          <li>菠萝</li>
          <li>桃子</li>
          <li>葡萄</li>
      </ul>
      <!--有序列表-->
      <ol type="1">
          <li>坐车</li>
          <li>回家</li>
          <li>过暑假</li>
      </ol>
      <!--链接标签-->
      <a href="http://www.baidu.com">百度一下你就知道</a>
      <!--在另一个页面打开网址-->
      <a href="http://www.baidu.com"target="_blank">百度一下</a>
      <!--链接到1个文件(如果文件能直接被浏览器解析会直接打开,不能就会弹出下载框)-->
      <a href="C:\Users\yyy\Documents\Java\html语言入门\src\imgs\20150903094844_WYjsH.jpeg">小猫</a>
      <table border="1" style="width: 100px;height: 50px;"cellpadding="10"cellspacing="10"bgcolor="#ffe4c4" align="center">
          <tr>
              <th>forever</th>
          </tr>
          <tr>
              <td>w</td>
              <td>t</td>
              <td>c</td>
          </tr>
          <tr>
              <td>y</td>
              <td>y</td>
              <td>y</td>
          </tr>

      </table>


</body>
</html>

三.表单标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--action:表单提交的地址-->
    <form action="/target.html"method="get">
        <!--表单元素input:type设置input元素的样式-->
        用户名:<input type="text" name="username" value="喵喵"size="3"/><br>
        密&emsp;码:<input type="password"name="password"maxlength="10"/><br>
        确认密码:<input type="password"name="password"maxlength="10"placeholder="请输入确认密码"required="required"/><br>
        爱&emsp;好:<input type="checkbox"name="hobby"value="basketball"/>篮球
                   <input type="checkbox"name="hobby"value="football"/>足球
                   <input type="checkbox"name="hobby"value="volleyball"/>排球<br>
        性&emsp;别:<input type="radio" name="sex"value="male"/>男
                  <input type="radio" name="sex"value="female"/>女<br>
        头&emsp;像:<input type="file"name="picturehead"/><br>
        <!--下拉框select-->
        现居地:<select>
             <option value="">请选择:</option>
             <option value="js">江苏</option>
             <option value="sh">上海</option>
             <option value="bj">北京</option>
        </select><br>
        <!--多行文本框textarea-->
        自我介绍:<textarea rows="5"cols="15" name="introduce"></textarea><br>
        隐藏域:<input type="hidden"name="user.id"value="6"/><br>
        <input type="button" value="普通按钮"/>
        <input type="submit" value="注册"/>
        <input type="reset" value="清空"/><br>
        <!--表单按钮button:type设置按钮的作用 不常用-->
        <button type="button">点我</button>



    </form>
</body>
</html>

效果图:

四.div和span元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="background-color: aquamarine">
        1
    </div>
    <div style="background-color: darkgoldenrod">
        2
    </div>
    <p>文本内容</p>
    <div class="news">
        <h2>新闻标题</h2>
        <p>简短摘要</p>
    </div>
    <div>
        <h2>新闻标题</h2>
        <p>简短摘要</p>
    </div>

</body>
</html>

效果图:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--对部分文字样式进行编辑-->
    <span>hello
        <span style="color: palevioletred">world</span>
    </span>
</body>
</html>

效果图:

五.选择器

      1.元素选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        h1{color: palevioletred;font-size: 10px}
        h2{color: aquamarine;font-size: 15px}
    </style>
</head>
<body>
    <h1>CSS样式表</h1>
    <h2>hello css</h2>

</body>
</html>

效果图:

      2.类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        p.text{color: cornflowerblue}
        .text.a{color: blue}
    </style>
</head>
<body>
     <h1 class="text">文本1</h1>
     <h2 class="text">文本2</h2>
     <p class="text">这是一个段落</p>
     <p class="text a">这也是一个段落</p>
</body>
</html>

效果图:

      3.ID选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #yyy{
            color: palevioletred;
            font-family: 微软雅黑;
            font-size: 20px;
        }
        #wtc{
            color: blue;
        }
    </style>
</head>
<body>
     <div id="yyy">思路决定出路,思想成就梦想</div>
     <div id="wtc">思想改变一切</div>
</body>
</html>

效果图:

      4.属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        input[type='text']{background: blue}
        input[type='password']{background: palevioletred}
        a[href]{color: bisque}
    </style>
</head>
<body>
    用户名:<input type="text"name="username"/><br>
    密&emsp;码:<input type="password"name="password"/><br>
    <a href="#">baidu</a>
</body>
</html>

效果图:

      5.后代选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
      p span{color: aquamarine}
    </style>
</head>
<body>
   <p><span>段落中的span元素</span></p>
   <div><span>div中的span元素</span></div>
</body>
</html>

效果图:

      6.子元素选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /*子元素选择器,只能选择指定元素下的子元素*/
        h1>strong{color: bisque}
        /*后代选择器,只要指定元素下包含了指定的子元素,就可以获取到*/
        h1 strong{font-family: 微软雅黑 }
    </style>
</head>
<body>
   <h1>
       h1里面的内容
       <strong>strong里面的内容</strong>
       <strong>strong里面的内容</strong>
   </h1>
   <h1>
       h1里面的内容
       <em>em里面的内容<strong>strong里面的内容</strong></em>
   </h1>


</body>
</html>

效果图:

       7.组合选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        h1,h3,h5{color: aqua}
    </style>
</head>
<body>
     <h1>heading1</h1>
     <h2>heading2</h2>
     <h3>heading3</h3>
     <h4>heading4</h4>
     <h5>heading5</h5>
     <h6>heading6</h6>

</body>
</html>

效果图:

表单元素的综合案例
weixin_45784564的博客
05-21 3344
目录任务描述相关知识编程要求测试说明源码 任务描述 本关任务：完成一个表单的创建任务。 这里标签要按照规定格式来写，因为有<div>标签，会自动换行，就不用<br>标签了。 属性的先后顺序为： type -- id -- class -- name -- value ，其他需要添加的属性最后写。 其他要求如下： 用户名：添加类.common； 昵称：添加类.common； 性别：name属性的值为sex，禁用保密； 男：<label>标签的for属性的值为male；
HTML常用标签代码
05-07
在本资源中，我们看到的"HTML常用标签代码"显然是一个帮助初学者或开发者学习和练习HTML标签的资料。下面将详细介绍一些常见的HTML标签及其用法。 1. `<html>`: 这是每个HTML文档的根元素，包含整个网页的代码。...
HTMLXUEXI
Lybode的博客
02-24 245
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表单</title> </head> <body> <p>html表单用来收集不同类型的用户输入</p> <h3>表单是一个包含表单元素的区域</h3> ...
小白IT：炫彩的网页是怎么做的，什么是前端？？？Python前端基础&CSS 效果渲染
yidianyidei的博客
05-18 1037
文章目录一 认识HTML1.web服务的本质2.HTML是什么？3.html文档格式4.html标签格式标签的语法几个重要的属性HTML注释二、常用标签1.！DOCTYPE标签2.head内常用标签meta标签1.meta介绍2.meta标签组成3非meta标签3.body内常用标签基本标签两个重要标签：div和span注意几个概念判断块级标签和内联标签的方法：图形标签：img超链接标签（锚标签a）列表标签：list1.无序列表2.有序列表标题标签表格标签：table表格标签实例属性三、HTML表单1.HT
HTML常用标签
xiaoyu_alive的博客
01-24 9568
讲述了HTML各种标签用法、属性以及相应的其他知识点，超级详细！
HTML常用标签总结
zjs246813的博客
01-25 1812
HTML是一种用来描述网页的语言。
HTML常用标签合集
rbh200812的博客
07-26 1万+
html常见标签的认识与运用
html常用标签总结
ch206265的博客
02-28 1831
html负责结构，css负责样式，JavaScript负责页面交互等行为，html中常用的结构标签有标题标签、段落标签、水平线标签、换行标签、文本格式化标签、图像标签、链接标签以及注释和特殊字符标签等。
HTML常用标签详解
热门推荐
淘小欣的博客
03-04 2万+
HTML常用标签详解 一、head内常用标签 1.基本标签（非meta标签） <!--title: 定义网页标题--> <title>Title</title> <!--style: 定义内部样式表. 内部用来书写css代码--> <style> h1 { color: greenyellow; } </style> <!--script: 内部用来书写js代码--> <script
HTML常用标签大全
weixin_45203607的博客
09-22 3182
HTML常用标签大全 HTML结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> 内容 </body> </html> 布局标签 <nav>导航</nav> <header> 头部区域
HTML常用标签属性汇总.doc
06-22
HTML常用标签属性汇总 HTML中的标签是构建网页的基础，而标签属性则用来定义标签的附加信息和行为。了解各种标签及其属性对于制作结构化和功能丰富的网页至关重要。以下是一些常用HTML标签及其属性的汇总： 1. ...
03_HTML常用标签.md
01-06
03_HTML常用标签.md
(完整word版)HTML常用标签属性汇总.doc
11-15
HTML常用标签属性汇总 HTML（HyperText Markup Language）是一种用于设计网页的标记语言，它包括了许多不同的标签，每个标签都有其特定的属性和用途。下面是HTML中一些常用的标签属性汇总： body标签 body标签是...
基于Python实现的信息检索与文本挖掘综合搜索引擎系统-包含网络爬虫模块-网页内容解析与分词处理-索引构建与数据库存储-Web查询服务与结果展示-用于课程大作业与学术研究-技术栈.zip
08-22
jdk1.8基于Python实现的信息检索与文本挖掘综合搜索引擎系统_包含网络爬虫模块_网页内容解析与分词处理_索引构建与数据库存储_Web查询服务与结果展示_用于课程大作业与学术研究_技术栈.zip
一个基于python的文件同步小工具.zip
08-22
一个基于python的文件同步小工具.zip
python3-wxpython4-webview-4.0.7-13.el8.tar.gz
最新发布
08-22
# 适用操作系统：Centos8 #Step1、解压 tar -zxvf xxx.el8.tar.gz #Step2、进入解压后的目录，执行安装 sudo rpm -ivh *.rpm
基于python的多功能扫描器.zip
08-22
基于python的多功能扫描器.zip
基于python的第三方QQ登陆工具类.zip
08-22
基于python的第三方QQ登陆工具类.zip
HTML常用标签全面总结与使用指南
标题中提到了“HTML常用标签”，这指的是在超文本标记语言（HTML）中，开发者经常使用的一系列基本元素。HTML是用于创建网页和网页应用的标准标记语言，它定义了网页的结构、内容以及如何显示给用户。以下是一些HTML...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值