HTML基础
文章目录
初级篇-基础标签
hyperText markup language 超文本标记语言
<html lang = "en"> // <!--头标签 en是英文 zh是中文-->
<head>
<meta charset="UTF-8"> <!--charset是编码字符节-->
<title>这里放标题，网页顶部展示的那个</title>
<meta name="服装" content="keywords">
<meta name="description" content="这是一件好衣服">
<!--编码分类：gb2312-只有简体中文 gbk-包含繁体 unicode-万国码(所有国家的语言都包含) utf-8是unicode的升级版 现在最常用的编码-->
<!--head的部分是编辑给浏览器的 思想类看不见的东西。-->
</head>
<body>
<!--看得见的东西 展现给用户看的-->
<!--告诉搜索引擎爬虫，我们的网站是关于什么内容的。-->
<p>这是一个段落标签</p>
<h1>h${标题}*6 这是快速生成六个标签的快捷方式</h1>
<strong>加粗</strong>
<em>斜体</em>
<strong>
<em>又加粗又斜体</em>
</strong>
<del style="color:red">$100 删除线</del>
<address>地址标签，比较少用，会加粗斜体，独占一行，跟<p><em>组合的效果一样</em></p></address>
<div>充当容器的作用，让页面更加结构化！</div> <!--块元素-->
<span></span> <!--行内元素-->
</body>
</html> <!--尾标签-->
进阶篇-高级标签
<div style="width:100px;height:100px;background-color:red">
<!--内容过多但是div容器不会换行 但是如果是中文汉字会换行 因为汉字好识别个数 但是英文连一起 不知道是一个单词还是多个单词 所以需要加空格(文本分隔符) 加空格是为了分割前后字符 所以无论写多少个空格都只会分隔一次-->
iosahfioshdihsfhjjksdhfnjkadsngvaj
</div>
<!--html编码 &中间加内容；-->
<!--空格文本 写一个就是空一格 多个就空多格-->
空 格
<!--div标签-->
小于：less than -->< (英文字母开头拿出来组成小于)
大于：great than -->> (英文字母开头拿出来组成大于)
<div> --> <div> <!--效果一样-->
<br> <!--换行 单标签-->
有序列表
有序列表 type可以自定义以1/a/A/i/I开始排序
start="2"以第二个开始排 reversed倒序
<ol type="1" start="2" reversed="reversed">
<li>这是第一个</li>
<li>这是第二个</li>
<li>这是第三个</li>
</ol>
无序列表
无序列表应用场景：
大的功能有很多子功能组成 每个功能子项的功能和样式基本相同 只是内容有点差别
<ul type="disc"> <!--disc是● circle是○ square是实心正方形 -->
<li>草莓</li>
<li>苹果</li>
<li>橙子</li>
</ul>
无序列表的应用实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
/* 去除○ */
list-style:none;
}
li {
/* 上下0左右10 */
margin: 0 10px;
/* 列表中的数据横向排布 */
float: left;
color: #f40;
font-weight:bold;
font-size:14px;
height: 25px;
line-height: 25px;
padding: 0 5px;
}
/* hover 光标移入时 */
li:hover {
border-radius:15px;
background-color: #f40;
color: white;
}
</style>
</head>
<body>
<ul type="circle">
<li>天猫</li>
<li>聚划算</li>
<li>天猫超市</li>
</ul>
</body>
</html>
img标签
<!--img标签 src是source的缩写 所以后面填写的是src的资源地址
alt当图片地址错误的时候展示文字信息 alt图片占位符 title图片提示符 鼠标移入会显示的内容-->
1.网上的url(网络地址的引用)
<img src=”“ style="width:200px" alt="这是张杰" titli="这是杰哥">
2.本地的相对路径
../a/b.html
3.本地的绝对路径
C://a/b/c.index,js
a标签
a标签作用一：超链接
href超文本引用 a标签可以包裹任何东西 定义宽高之后 在范围内点击都会跳转
target="_blank"在新标签页打开
<a href="http://www.baidu.com" style="width:100px;height:100px;background-color:greey;display:block;" target="_blank">百度一下</a>
<!--超级链接a anchor锚 记录一个位置 然后可以通过a回到那个位置
返回顶部的实现 还有目录和内容 点击目录跳转到内容位置-->
<div id="demo1" style="width:100px;height:100px;background-color:green;">
demo1
</div>
<div id="demo2" style="width:100px;height:100px;background-color:red;">
demo2
</div>
<a href="#demo1">find demo1</a>
<a href="#demo2">find demo2</a>
a标签作用二：跳转到指定位置(锚点)
<div id="demo1" style="width:100px;height:100px;background-color:green;">
demo1
</div>
<div id="demo2" style="width:100px;height:100px;background-color:red;">
demo2
</div>
<a href="#demo1" style="display:block;position:fiexd;bottom:100px;border:1px solid black;height:50px;width:200px;background-color:fcc;">find demo1</a>
<!--这一块内容是不会动的所以类似目录 上面有id的就是文本位置-->
<a href="#demo2" style="display:block;position:fiexd;bottom:150px;border:1px solid black;height:50px;width:200px;background-color:fcc;">find demo2</a>
a标签作用三：打电话、发邮件
- 会调用拨打电话的接口，拨出电话。
- 自动调用邮箱系统，给指定邮箱发邮件。
<a href="tel:1234567890">给成哥打电话</a>
<a href="mailto:1234567890@qq.com">给成哥发邮件</a>
a标签的作用四：协议限定符
会强制执行javascript:while(1){alert(‘让你手欠’)}" 让系统陷入无限死循环
alert(‘让你手欠’)是弹窗提示
<a href="javascript:while(1){alert('让你手欠')}">你点我试试呀！</a>
form表单
前后端发送数据的方式get/post
action放发送数据的目的地址，例如：http://www.baidu.com/123.php
发送数据的两个条件：数据值和数据名
- 数据值通过页面填写
- 在input中定义数据名name=“” 没有数据名提交会不成功(例如：name=“password”)
提交成功的体现（input/submit）
提交完之后地址栏发生变化，后面拼接了?username=sunny&password=123123（sunny和123123是网页输入的内容）
<style>
input{
border:1px solid #999
}
</style>
<form method="get" action="">
<p>
<!--输入框(文本) 内容可见 定义类型和数据名 value加提示语-->
username:<input type="text" name="username" value="请输入用户名">
</p>
<p>
<!--密码框 内容不可见 ●●● 定义类型和数据名-->
password:<input type="text" name="password">
</p>
<!--单选框-->
张杰帅不帅？<!--需要定义相同的name 否则无法确定是否是同一个选项组 传数据需要数据名和数据值 这里名有了 需要定义值value 定义好了单选框就可以提交数据了-->
<input type="radio" name="zhangjie" value="shuai">1.帅
<input type="radio" name="zhangjie" value="shuai much">2.很帅
<input type="radio" name="zhangjie" value="super shuai">3.超级帅
<!--提交按钮 按钮显示文字默认是提交 value可以重写按钮文字
提交完之后地址栏发生变化，
后面拼接了?username=sunny&password=123123（sunny和123123是网页输入的内容）-->
<input type="submit" value="这是一个提交按钮">
</form>
<!--控制台 但是一般开发会对数据进行加密 md5加密算法不可逆
所以每次密码校验都是校验加密之后的md5值是-->
var div = document.getElementsByTagName('input')[1];
div.value <!--输入这行可以获取当前输入的密码-->
输入框的应用
- onfocus聚焦
- onblur失去焦点
<!--当输入框失去焦点时显示提示语(内容为空的前提下) 聚焦时清除提示语(在没有输入其他内容情况下) 提示语和输入的文字颜色不一样
有个小缺陷 当用户输入请输入用户名时 聚焦还是会清除内容-->
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'}">
<!--聚焦清除提示语 获取焦点又出现提示语-->
单选框和复选框
单选框radio的用法(checked默认选中)
<form ethod="get" action="">
<h1>
张杰 <!--name是定义选项组 value是当前选项的值-->
</h1>
<input type="radio" name="zhangjie" value="shuai">1.帅
<input type="radio" name="zhangjie" value="shuai much">2.很帅
<input type="radio" name="zhangjie" value="super shuai" checked="checked">3.超级帅
<input type="submit">
</form>
复选框checkbox的用法(checked默认选中)
<form ethod="get" action="">
<h1>
张杰 <!--name是定义选项组 value是当前选项的值-->
</h1>
<input type="checkbox" name="zhangjie" value="shuai">1.帅
<input type="checkbox" name="zhangjie" value="shuai much" checked="checked">2.很帅
<input type="checkbox" name="zhangjie" value="super shuai" checked="checked">3.超级帅
<input type="submit">
</form>
select组件(下拉菜单)
<h1>
Province
</h1>
<!--提交数据需要数据名和数据值 这里因为被select包裹 所以数据名可以定义在select后面 beijng等地名就是值 如果这里非要再加value 那会以value中的内容为准-->
<select name='province'>
<option value="shoudu">beijing</option>
<option value="dongfangmingzhu">shanghai</option>
<option value='goubulibaozi'>tianjin</option>
<input type="submit"></input>
</select>
5806
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
