HTML
hyperText markup language 超文本标记语言
一、基础标签
<html lang="en">
<!--lang="en" 告诉搜索引擎爬虫，我们的网站是关于什么-->
<hend>
<meta charset="utf-8">
<!-- utf-8 万国码语言 -->
<title>淘宝网</title>
</hend>
<body>
我是墨迹
<!-- 段落标签 使文字成段显示 -->
<p>段落</p> <p>段落</p> <p>段落</p>
<!-- 标题标签 6个标签 逐次减小 占一行 比普通文字加粗-->
<h1>标题</h1>
<h2>标题</h2>
<h3>标题</h3>
<h4>标题</h4>
<h5>标题</h5>
<h6>标题</h6>
<strong>加粗</strong>
<em>斜体</em>
<!-- 可以嵌套使用 -->
<strong>
<em>
举个例子
</em>
</strong>
<br>
<!-- 中划线 商品打折时使用-->
<del>￥50</del>
<!-- 地址标签 -->
<address>快乐星球幸福小区9栋一单元301</address>
<!--容器-->
<div>举个例子</div><div>举个例子</div><div>举个例子</div>
<span>来个例子</span><span>来个例子</span><span>来个例子</span>
<!-- 键盘空格的含义：文本分隔符 -->
<!--空格：
小于：<
大于：>-->
你 好
有个标签是<div>
<!-- br单标签 换行符 单独呈现 hr水平线-->
<br>b
<hr>
</body>
</html>
二、高级标签
<html lang="en">
<head>
<meta charset="utf-8">
<title>lesson2</title>
</head>
<body>
<!-- 成组出现 -->
<h1 id="demo1">一、有序列表 </h1>
<ol type="i" start="2">
<!--
type 五种排序的标签 1/a/A/i/I
reversed="reversed" 逆着排序
start:从第几个开始排序
-->
<li>你好，李焕英</li>
<li>唐人街探案3</li>
<li>刺杀小说家</li>
</ol>
<h1>二、无序列表</h1>
<ul type="square">
<!-- type：默认disc 为实心圈；square为方块；circle：空心圈 -->
<li>菠萝</li>
<li>提子</li>
<li>芒果</li>
</ul>
<br>
<h1>三、img 引入图片</h1>
<!-- 引入图片 src中填写图片地址
1.网上url 2.本地的绝对路径() 3.本地的相对路径
alt 图片占位符
title:图片提示符-->
<h2>1.网上url</h2>
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fnimg.ws.126.net%2F%3Furl%3Dhttp%253A%252F%252Fdingyue.ws.126.net%252F2021%252F0312%252F2b5a4a62j00qpuv85000ed000dw006yp.jpg%26thumbnail%3D650x2147483647%26quality%3D80%26type%3Djpg&refer=http%3A%2F%2Fnimg.ws.126.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618295885&t=d21e22a8010183a2da08c3851098e3ae" style="width:200px " alt="这是鹿晗" title="鹿晗">
<h2>2.本地的绝对路径</h2>
<img src="C:\Users\王佳节\Desktop\渡一web学习百大案例\html\image\img.jpg"style="width:200px" alt="这是华晨宇" title="华晨宇">
<h2>3.本地的相对路径 </h2>
<img src="img1.jpg" style="width: 200px" alt="这是华晨宇" title="华晨宇">
<br>
<h1>四、a标签</h1>
<h2>1.超级链接</h2>
<a href="http://www.baidu.com" target="_blank">百度</a> <br>
<a href="http://www.baidu.com" style="width: 100px;height: 100px">
<img src="img1.jpg" style="width: 100px">
</a>
<h2>2.锚点</h2>
<!-- a标签 最原始的作用是作为锚点记录位置 -->
<a href="#demo1">回到顶部</a>
<h2>3.打电话、发邮件</h2>
<a href="tel:10086">给中国移动打电话</a>
<a href="mailto:moji_1998@163.com">给墨迹发邮件</a>
<h2>4.协议限定符</h2>
<!-- <a href="javascript:while(1){alert('让你手欠')}">你点我试试呀！</a> -->
<h1>五、form 表单标签</h1>
<!-- form表单 可以发送数据
method：发送数据的方式
action:发送给谁的地址
-->
<form method="get" action="">
<p>
username:<input type="text" name="username" style="color:#999" value="请输入用户名" onfocus="if(this.value=='请输入用户名'){this.value='';this.style.color='#424242'}" onblur="if(this.value==''){this.value='请输入用户名';this.style.color='#999'}" >
</p>
<p>
password:<input type="password" name="password">
</p>
<p>
<!-- 单选框 -->
sex: 男<input type="radio" name="sex" value="boy">
女<input type="radio" name="sex" value="girl">
</p>
<p>
<input type="submit" name="提交">
</p>
</form>
</body>
</html>
2690
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
