初学HTML

最新推荐文章于 2022-07-19 17:15:53 发布
最新推荐文章于 2022-07-19 17:15:53 发布
阅读量154 收藏
点赞数 1
分类专栏： 新手 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/maxian1999/article/details/109002908
版权

加油加油加油，天天做笔记！
入门跟着黑马的pink老师在b站的视频走的。

这是他的b站链接。
https://www.bilibili.com/video/BV14J4114768?p=1

文章目录

HTML语法规范

<!DOCTYPE html>	<!--文档声明标签，告诉浏览器使用哪种HTML版本来显示页面-->
<html lang="zh-CN">	<!--用来定义当前文档显示的语言-->
<head>
    <meta charset="UTF-8">	<!--规定了HTML文档应该使用哪种字符编码-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>网页头顶上显示的标题</title>
</head>
<body>
  内容
</body>
</html>

HTML常用标签

标题标签

<body>
  <h1>一级标签</h1>
  <h2>二级标签</h2>
  <h3>三级标签</h3>
  <h4>四级标签</h4>
  <h5>五级标签</h5>
  <h6>六级标签</h6>
</body>

段落标签与换行标签

<body> <!--区别：(1)单、双标签；(2)换行标签仅开始新的一行，段落标签则会产生一些垂直间距-->
    <p>这是一个段落，请求换行↓<br />换行成功
	</p>
</body>

文本格式化标签

<body>
  我是<strong>加粗</strong>的文字 <!--推荐-->
  我是<b>加粗</b>的文字
  我是<em>倾斜</em>的文字 <!--推荐-->
  我是<i>倾斜</i>的文字
  我是<del>删除线</del> <!--推荐-->
  我是<s>删除线</s>
  我是<ins>下划线</ins> <!--推荐-->
  我是<u>下划线</u>
</body>

盒子标签

<body>	<!--<div></div>独占一行，而<span></span>一行可以布局多个-->
    <div>div标签单独占一行</div>
  	<span>span标签</span>
  	<span>可以</span>
  	<span>一行多个布局</span>
</body>

图像标签

<body>	<!--同级、上一级、下一级路径与绝对路径-->
   <img src="img.jpg" alt="我是pink老师" title="我是pink老师思密达"  width="500" border="15"/>
    <!--alt	替换文本 图像显示不出来的时候用文字替换-->
	<!--title 提示文本 鼠标放到图像上,提示的文字-->
	<!--width 给图像设定宽度-->
	<!--height 给图像设定高度-->
	<!--border 给图像设定边框-->
</body>

超链接标签

<body>
    <a href="http://www.qq.com" target="_blank"> 腾讯QQ</a>
    <!--target 打开窗口的方式  默认的值是 _self 当前窗口打开页面  _blank 新窗口打开页面-->
    <!--href="http://****.com" 外部链接-->
    <!--href="***.html"	内部链接-->
    <!--href="#" 空链接-->
    <!--href="img.zip" 下载链接,可以是.exe or .zip等-->
    <a href="http://www.baidu.com"><img src="img.jpg"/></a>
	<!--网页元素可以是一张图片-->
    <!--一下为一个锚点定位-->
    <a href="#maodian">点击跳转到锚点</a>
    <h1 id="maodian">这是一个锚点</h1>
</body>

注释标签与特殊字符

<body>
    <!-- 这是一个注释标签 -->
    这里有四&nbsp;&nbsp;&nbsp;&nbsp;个空格
    <!-- <p> 是一个段落标签 &lt是< ;	&gt是>	-->
     &lt; p  &gt;   是一个段落标签
</body>

表格标签

<body>
    <table align="center" border="1" cellpadding="0" cellspacing="0" width="500" height="249">
        <!-- 这些属性要写到表格标签table 里面去,属性仅了解即可，主要在CSS中使用 -->
        <thead>
        	<tr>
                <th>姓名</th>  <th>性别</th> <th> 年龄 </th>
            </tr>
        </thead>
        <!-- 表头单元格标签<th></th>，有加粗并且居中的效果 -->
        <!--<thead></thead>与<tbody></tbody>为表格结构标签-->
        <tbody>
        	<tr><td>A</td>  <td>男</td> <td> 56 </td></tr>
        	<tr><td>B</td>  <td>男</td> <td> 58 </td></tr>
        	<tr><td>C</td>  <td>男</td> <td> 51 </td></tr>
        	<tr><td>D</td>  <td>男</td> <td> 57 </td></tr>
        </tbody>
    </table>
</body>

合并单元格

<body>
    <table width="500" height="249" border="1" cellspacing="0">
        <tr>
            <td></td>
            <td colspan="2"></td> <!--跨列合并-->
        </tr>
        <tr>
            <td rowspan="2"></td> <!--跨行合并-->
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </table>
</body> <!--如下效果-->

在这里插入图片描述

无序列表

<body> <!--只包含li，没有顺序，使用较多，<li></li>中可以包含任何标签-->
    <h4>这是一个无序列表</h4>
    <ul>
        <li>第一行</li>
        <li>第二行</li>
        <li>
            <p>这是第三行</p>
        </li>
    </ul>
</body>

在这里插入图片描述

有序列表

<body> <!--只包含li，有顺序，使用较少，<li></li>中可以包含任何标签-->
    <h4>这是一个有序列表</h4>
    <ol>
        <li>我是第一</li>
        <li>我是第二</li>
        <li>我是第三</li>
    </ol>
</body>

在这里插入图片描述

自定义列表

<body> <!--只包含dt和dd，<dt></dt>与<dd></dd>中可以包含任何标签-->
    <dl>
        <dt>关注我们</dt>
        <dd>新浪微博</dd>
        <dd>官方微信</dd>
        <dd>联系我们</dd>
        <dt>关注我们</dt>
        <dd>新浪微博</dd>
        <dd>官方微信</dd>
        <dd>联系我们</dd>
    </dl>
</body> <!--以下情况使用自定义列表-->

在这里插入图片描述

input表单元素

<body>
    <form action="xxx.php" method="get"> <!--表单域-->
         <!-- text 文本框 用户可以里面输入任何文字 -->
        用户名: <input type="text" name="username" value="请输入用户名" maxlength="6">   <br> 
        <!-- password 密码框 用户看不见输入的密码 -->
        密码: <input type="password" name="pwd" >  <br> 
        <!-- radio 单选按钮  可以实现多选一 -->
        <!-- name 是表单元素名字 这里性别单选按钮必须有相同的名字name 才可以实现多选1 -->
        <!-- 单选按钮和复选框可以设置checked 属性, 当页面打开的时候就可以默认选中这个按钮 -->
        性别: 男 <input type="radio" name="sex" value="男"> 女  <input type="radio" name="sex" value="女" checked="checked"> 人妖   <input type="radio" name="sex" value="人妖">   <br> 
        <!-- checkbox 复选框  可以实现多选 -->
        爱好: 吃饭 <input type="checkbox" name="hobby" value="吃饭"> 睡觉 <input type="checkbox" name="hobby">  打豆豆 <input type="checkbox" name="hobby" checked="checked"> 
        <br> 
        <!-- 点击了提交按钮,可以把 表单域 form 里面的表单元素 里面的值 提交给后台服务器 -->
        <input type="submit" value="免费注册">
        <!-- 重置按钮可以还原表单元素初始的默认状态 -->
        <input type="reset" value="重新填写">
        <!-- 普通按钮 button  后期结合js 搭配使用-->
        <input type="button" value="获取短信验证码"> <br>
        <!-- 文件域 使用场景 上传文件使用的 -->
        上传头像:  <input type="file" >
    </form>
</body>

在这里插入图片描述

label标签

<body>
   <label for="text"> 用户名:</label> <input type="text" id="text" >
   <input type="radio" id="nan" name="sex"> <label for="nan">男</label>
   <input type="radio" id="nv"  name="sex"> <label for="nv">女</label>
</body>

在这里插入图片描述

select下拉表单

<body>
    <form>
    籍贯: 
    <select>
        <option>山东</option>
        <option>北京</option>
        <option>天津</option>
        <option selected="selected">火星</option>
    </select>
</form>
</body>

在这里插入图片描述

textarea文本域

<body>
    <form>
        今日反馈:
        <textarea cols="50" rows="5">请给我留言 </textarea>
    </form>
</body>

在这里插入图片描述

Maxian1999
关注
专栏目录
A标签的css样式
从明天起 做一个幸福的人
11-12 7万+
  CSS为一些特殊效果准备了特定的工具，我们称之为“伪类”。其中有几项是我们经常用到的，下面我们就详细介绍一下经常用于定义链接样式的四个伪类，它们分别是：    :link    :visited    :hover    :active  因为我们要定义链接样式，所以其中必不可少的就是超级链接中的锚标签--a，锚标签和伪类链接起来书写的方法就是定义链接样式的基础方法，它们的写法如下：
python soup attrs_Python3 BeautifulSoup模块（3）：bs4通过contents[0]获取子节点中不包含span标签，并且a标签本身不包含class属性的a标签...
weixin_35795675的博客
01-28 813
子节点一个Tag可能包含多个字符串或其它的Tag,这些都是这个Tag的子节点.BeautifulSoup提供了许多操作和遍历子节点的属性.注意: BeautifulSoup中字符串节点不支持这些属性,因为字符串没有子节点一、实例代码import urllibfrom urllib import requestfrom bs4 import BeautifulSoupimport re#获取页面ba...
a标签的class属性什么意思_MBA统考中的A线和B线是什么意思？
weixin_33305287的博客
12-11 275
对于MBA考生而言，备考MBA是及其复杂的事，这里面有很多疑问，其中一个，就是MBA中的A线和B线，关于这点可能很多人连听都没听说过过，那么小编就为大家来介绍MBA工商管理硕士中A线与B线的区别。​1. 地区上划分A线是指北京等中东部21省市考生(A类考生)的分数线。B线是指内蒙古等西部10省区考生的分数线，有照顾性质的。*A类考生：报考地处一区招生单位的考生。*B类考生：报考地处二区招生单位的考...
给标签添加class php,js 如何给 a标签加class 样式
weixin_30623181的博客
04-13 933
js 怎么给 a标签加class 样式全部物流专员/助理物流经理/主管物流总监调度员快递员仓库管理员仓库经理/主管装卸/搬运工供应链管理单证员国际货运其它职位class="areaon"默认的是全部当点击物流专员/助理的时候把class给它呢？？------解决思路----------------------写了个完整的案例。点击的链接变成白字红底，其他的链接都变成默认样式...
a标签的class属性什么意思_经常听人说的A级车、B级车究竟是什么意思？
weixin_42298068的博客
12-06 1537
我们常常听到A级车、B级车这样的说法，很多人不知道汽车的A级B级是如何划分的，什么车属于A级？什么车又属于B级？实际上，这是对轿车的分级，最早是由大众创造出来的，但是大众后面自己没有继续用，反而是其他国家的人习惯了这种用法。比如说A级车B级车，C级车，D级车。那么这些级别是怎么进行划分的呢？汽车种类划分标准：车型级别划分主要是根据汽车的轴距、排量、重量、车身尺寸等因素，而最常见的划分方式就是以车身...
前端+HTML+JS+CSS+四大天王+初学html者
05-02
本文将深入探讨“前端+HTML+JS+CSS”，以及所谓的“四大天王”概念，这对于初学HTML者来说是非常重要的基础知识。 首先，前端开发是关于创建网页和应用程序的用户界面，包括布局、交互、视觉设计等。它主要由三个...
初学Html 5 + CSS 3 +JS自主编写新年倒计时网页
06-14
初学Html 5 + CSS 3 +JS自主编写新年倒计时网页，可以根据自己的需求来更改里面的内容，适合初学者来借鉴；大神勿喷！！！还请大神们提出宝贵的意见，感谢！
初学HTML 网站源码-自己做的
07-28
本资源“初学HTML 网站源码-自己做的”是一个专门为初学者设计的HTML实践项目，旨在帮助初学者通过实际操作来提升技能。 该源码网站可能包含了一系列的HTML文件，每个文件代表一个网页，例如首页、新闻页面或网址...
Html初学练习.zip
最新发布
01-01
Html初学练习Html初学练习Html初学练习Html初学练习 Html初学练习Html初学练习Html初学练习Html初学练习 Html初学练习Html初学练习Html初学练习Html初学练习 Html初学练习Html初学练习Html初学练习Html初学练习 Html...
html初学者入门教程
05-22
在探讨HTML初学者入门教程之前，我们首先需要理解HTML是什么。HTML，全称为超文本标记语言（Hypertext Markup Language），是一种用来创建网页的标准标记语言。HTML文件是包含文本内容和标记（tags）的特殊文本文件...
a标签跳转到指定div,jquery添加和移除class属性的实现方法
12-29
如果使用a标签跳转到指定的div区域，则只需要把a标签的href属性设置为“#divId”就好了，比如： <a>跳转到div</a> <div di=dction_1> 这里是被跳转的区域 </div> 第二个，使用jquery添加或者移除class属性 也很简单，使用jquery的方法addclass()和removeclass()属性就可以完成了。 其次，jquery的代码必须写到 $(document).read(function(){ //代码 }); 以上就是小编为大家带来的a标签跳转到指定div,jquery添加和移除class属性的
HTML标签内属性——尤其class属性（整理）
yjmwkxz的专栏
11-11 6065
空连接
【未解决】html中的a标签id与class冲突
全名工作狂的小城堡
10-28 1590
事情是这样子哒： 我本来写了个jquery的click动作，在使用选择器的时候，我想采用a标签的id，点击以后打开弹窗。然而这时候我把class样式也加在a标签里，结果不弹窗了。我用的浏览器是Firefox ESR 38.3.0版本。 代码如下： HTML代码 test     Username: jquery代码： jQuery
顶级域名 一级域名 二级域名 三级域名什么区别?
热门推荐
dezhen7792的博客
02-25 1万+
　　域名分“域“和”名”。 www.xxx.com这是大家公认的顶级域名，www是英文万维网的缩写，经过各种演化，就是现在大家公认的http://www.xxx.com也叫顶级域名，其实严格意义来说，他自身是二级域名。 　　非严格意义上，大家习惯这样区分： .com 顶级域 .com.cn 二级域 xxx.com 一级域名 xxx.xxx.com 二级域...
h5学习之7(html中的高级选择器的种类和用法，a标签和img标签)
晏金煜的博客
12-10 4711
html中的高级选择器的种类和用法，a标签和img标签 伪类选择器
a标签 详解
yxiangy的博客
07-19 2191
① a:link： 未访问链接 ,如 a:link {color:blue} ② a:visited： 已访问链接 ,如 a:visited{color:blue} ③ a:active： 激活时（链接获得焦点时）链接的颜色 ,如 a:active{color:blue} ④ a:hover： 鼠标移到链接上时 ,如 a:hover {color:blue}...
【前端学习之路——CSS】03选择器(class选择器、css选择器、a标签伪类选择器)
weixin_42491859的博客
02-28 1451
7、id选择器 <style type="text/css"> #id_name{ font-size:20px; } </style> 8、class选择器 一个元素可以设置多个class，中间用空格隔开 class = “hello p” <style type="text/css"> .id_name{ font-size:20px; } </style> id选择器在当前页面是唯一的
js控制某个div层中a标签的class属性，点击实现添加class属性，并且删除其他同级的class属性
angielong的博客
10-31 1万+
js代码实现添加class属性和删除clss属性 $(document).ready(function () { $("#test").removeClass("List_topA"); $('.List_top a').each(function () { if ($($(this))[0].href == String(window.location))
如何绕过CDN找源站ip？
weixin_30855761的博客
08-24 1万+
这是一个总结帖，查了一下关于这个问题的国内外大大小小的网站，对其中说的一些方法总结归纳形成，里面具体发现ip的方法不是原创，所有参考的原贴都也贴在了后面，大家可以自行看看原贴。 首先，先要明确一个概念，如果人CDN做得好，或者整个站都用CDN加速了，你是几乎找不到他的源站IP的，因为对于你来说被CDN给屏蔽了，是个黑盒子[1]。 下面，我们从一些特别的角度去绕过CDN找源站IP。从前往后，是提...
"初学HTML实例网页代码及个人网站设计实践
HTML实例网页代码是一段适合于初学HTML的同学使用的代码。这段代码中包含了CSS的样式设置以及div的样式布局，使得该实例较为全面，对学生的学习有很大的帮助。本文将通过从设计个人网站开始，并将其转换为代码的过程...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值