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>//容器标签,无特殊效果
 //空格
<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>