HTML——hyperText marup language 译为超文本标记语言
1.lang="en"告诉搜索引擎爬虫,我们网站是关于什么内容的
<html lang="en">
2.utf-8和unicode是万国码,gbk只识别繁体
<meta charset="utf-8">
双标签
<p>段落标签</p>
<h1>1级标题标签</h1>
<h2>2级标题标签</h2>
<h3>3级标题标签</h3>
<h4>4级标题标签</h4>
<h5>5级标题标签</h5>
<h6>6级标题标签</h6>
<strong>加粗标签</strong>
<em>斜体标签</em>
<del>删除线</del>
<address>地址标签</address>
<div>有换行的效果</div>
<span>没什么效果</span>
div和span是块,都是容器,与内部标签捆绑在一起,其中div能独占一行
单标签
空格和回车表示文本分标符
<br>
换行
<hr>
水平线
html编码
 -
空格
<-
小于号
>-
大于号
有序列表(ol)
ol中的属性:
1.type 排序参数,有5种值:1/a/A/i/I;
2.reversed 倒序,值有:reversed;
3.start 从何值开始排(阿拉伯数字表示即可);
4.默认顺序排列,从1/a/A/i/I开始排。
<ol type="1" reversed="reversed" start="4">
<li>奇迹.笨小孩</li>
<li>送你一朵小红花</li>
<li>少年的你</li>
<li>穿着条纹睡衣的男孩</li>
</ol>
无序列表(ul)
ul中的属性:type 排序形式,值有:disc (disciecle)实心圆/ square 方块/circle 圈
<ul type="circle">
<li>天猫</li>
<li>聚划算</li>
<li>天猫超市</li>
</ul>
用css做出一个效果如下:
<style type="text/css">
*{
margin: 0;
padding: 0;/*空隙没了*/
}
ul{
list-style: none;/*去掉ul的圈*/
}
li{
margin: 0 10px;/*隔开*/
float: left;/*横过来*/
color:#f40;/*颜色*/
font-weight: bold;/*加粗*/
font-size: 16px;/*字体大小*/
height: 25px;/*高度*/
line-height:25px;/*上下居中*/
padding: 0 5px;/*左右空隙*/
}
li:hover{/*鼠标放上去的变化*/
border-radius:15px;/*圆角*/
background-color: #f40;/*背景颜色*/
color: #fff;/*字体颜色*/
}
</style>
效果图样:
图片(img)
图片路径:
1.网上url;
<img src="https://" style="width: 500px;">
2.本地的绝对路径;
<img src="C:\Users\Administrator\Desktop\lesson\x.jpg" style="width: 500px;height: 200px;">
3.本地的相对路径 。
<img src="1.jpg" style="width: 500px;height: 200px;" alt="这是动画" title="this is img">
<!--注:alt图片占位符,加载不出来的图会显示文字内容;title图片提示符鼠标对焦显示的字样-->
锚,超链接(a)
a标签 :anchor--锚,超链接
属性:href—hyperText referce超文本引用,值是所要引用的内容;
target目标,值是_blank新页面打开。
1.超链接
<a href="https://www.baidu.com" target="_blank">百度</a>
2.瞄点
<div id="demo1">demo1</div>
<div id="demo2">demo2</div>
<a href="#demo1">find demo1</a>
<a href="#demo2">find demo2</a>
a标签中加入以下css样式,会形成瞄点列表且浮动在右侧:
<a style="display: block;position: fixed;bottom: 100px/150px;right: 100px;border: 1px solid black;height: 50px;width: 200px;background-color: red;" href=""></a>
3.打电话,发邮件
<a href="tel:195****1034">给小丁打电话</a>
<a href="mailto:290****661@qq.com">给小丁发邮件</a>
4.协议限定符
<a href="javascript:while(1){alert('让你手欠')}">你点我试试!come on!</a>
表单(form)
form标签:
属性:method----发送数据的方式,值有get/post;
action接收的位置。
<form method="get" action="">
<input>
<input>
...
</form>
搭配表单的<input
>标签
<p>username:<input type="text" name="username" value="请输入用户名"></p><!--输入框-->
<p>password:<input type="password" name="password"></p><!-- 密码框 -->
<p>丁<input type="radio" name="star" value="ding"><!-- 单选框 -->
娅<input type="radio" name="star" value="ya" checked="checked">
<!--checked=checked作用是默认选项-->
琴<input type="radio" name="star" value="qin">
</p>
<p>
1.apple<input type="checkbox" name="fruit" value="apple"><!--复选框-->
2.orange<input type="checkbox" name="fruit" value="orange">
3.banana<input type="checkbox" name="fruit" value="banana">
</p>
<p>
<select name="Province"><!--下拉选项-->
<option>beijing</option>
<option>guangzhou</option>
<option>wuhan</option>
<option>shanghai</option>
</select>
<input type="submit" value="提交"><!--提交框-->
</p>
做一个username表单效果为鼠标聚焦原value
值消失,可自主输入值输入字体颜色改变并判断,若未输入值或与原value
值相同,即在鼠标失去聚焦时,依旧显示原value
值字体颜色也为原色,反之保留自主输入值和输入后得到的颜色。
css+js样式为:
<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>
<!-- onfocus鼠标聚焦发生什么事; onblur鼠标失去焦点复原-->