html 标签学习——第一部分-CSDN博客

本文链接：https://blog.csdn.net/qq_42221394/article/details/104293487

1.<html><html> 根标签,一个html文件只有一个

1.1<head></head> 结构化标签，html文件中必存在——人看不到，展示给浏览器

	<meta> 属性，属性名=“属性值” 
		
		例子1：<meta charset="utf-8">
					charset  属性名，编码字符集
			<!--常用的编码标准：utf-8（最通用的万国码）、gb2312（亚裔字符&简体中文）、gbk（亚裔字符&中文简繁）、unicode（万国码）-->
		例子2：<meta content=" " name="keyword">关键词
		例子2：<meta content=" " name="description">描述

	<title></title>网页上显示的标签卡

1.2<body></body> 结构化标签，html文件中必存在——人看得到，展示给用户

<p></p>//段落标签
<h1></h1>…<h6></h6>//标题标签
<strong></strong>//加粗
<em></em>//斜体
<del></del>//划去
<address></address>//地址标签
<div></div>//容器标签，独行展示
<span></span>//容器标签，无特殊效果
&nbsp//空格
<br>//回车换行，此标签是单个出现的
<hr>//横线

1.2.1 列表标签（有序列表&无序列表）

part1 有序列表

<ol> <!-- 有序列表标签,默认以1、2.......方式顺序编号 -->
 			<li></li>
 			<li></li>
</ol>
 <ol type="A"><!--以A、B、......方式编号-->
 <ol type="i" reversed="revrsed"><!--以i、ii、......方式逆序编号-->
 <ol type="Ⅰ" start="3"><!--以Ⅰ、Ⅱ、......方式编号,且从第三个开始编号-->

顺序列表<ol>标签举一个栗子：
代码：
使用举例
效果：
在这里插入图片描述

part2 无序列表

<ul><!--无序列表标签-->
 			<li></li>
 			<li></li>
</ul>
<ul type="circle"> <!--空心圆样式-->
<ul type="disc"> <!--实心圆样式-->
<ul type="square"> <!--实心方块样式-->

1.2.2 图片标签

<img scr=" "><!--里面的参数可以填写两种1.网上url 2.本地的绝对路径、相对路径-->
<img scr=" " style ="width:200px;"><!--设置图片的宽度-->
<img scr=" " alt ="这是土豆"><!--图片占位符-->
<img scr=" " title ="土豆"><!--图片提示符号-->

1.2.3 超文本引用标签（ps：a标签可以包裹图片、文字）

<a href="www.baidu.com">百度</a><!--打开超链接（anchor锚点）-->
<a href="www.baidu.com" target="_black_">百度</a><!--在新的标签页打开超链接-->
<a style="display:block;position:fixed;bottom:100px;right:100px;border:1px solid black;height:150px;width:200px;background-color:#fcc;" href="www.baidu.com">百度</a>
<a href="tel：18888888888">给您的小可爱打电话</a><!--打电话-->
<a href="mailto:1076479020@qq.com">给您的小可爱发邮件</a><!--发邮件-->
<a href="javascript:">点击强制运行javascript</a>
<a href="javascript:while(1){alter('让你手欠')}">点击强制运行javascript</a><!--点击之后会一直弹出提示框“让你手欠”-->

a标签的作用

超链接
锚点
打电话（发邮件）
协议限定符

1.2.3 表单标签

<form method="get" action=" ">
	username:<input type="text" name="username" value="请输入用户名"><!--用户名-->
	password:<input type="password" name="password" value="请输入密码"><!--密码-->
	
	<input type="radio" name=" " value=" "><!--单选框-->
	<input type="checkbox" name=" " value=" "><!--复选框-->
	<input type="submit" value="login"><!--提交 -->
</form>
username:<input type="text" name="username" style="color:#999" value="请输入用户名" οnfοcus="if(this.value=='请输入用户名'){this.value='';this.style.color='#424242'} οnblur="if(this.value==''){this.value='请输入用户名';this.style.color='#999'}">
<!--下拉菜单-->
<select>
	<option>beijing</option>
	<option>shanghai</option>
	<option>tianjin</option>
</select>