<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的Html</title><!--title 浏览器标题 -->
<!-- 内部式使用语法：
在title下写* <style type="text/css">
CSS代码
标签选择器：标签名 {};
ID选择器 ：# ID值{};
类选择器 ：.类名{};
</style>
-->
<style type="text/css">
/*标签选择器的使用方法*/
body{
background-color: grey;
/* background-image: url("myimg.png");默认平铺*/
/*background-repeat: no-repeat;不平铺*/
/*background-repeat: repeat-x;水平平铺*/
/*background-repeat: repeat-y;垂直平铺*/
}
table
{
background: cyan;
}
/*-- ID选择器要先给元素定义ID，且唯一 -->*/
#id_div1{
background: darkgreen;
/*设置字体大小，字体加粗等*/
font-size: 72px;
font-weight: bold;
/*设置边框样式，粗细 颜色 实线，1像素 黄色*/
border:solid 1px yellow;
}
/*可以多个元素对应一个类*/
.ul_li{
background: blue;
}
</style>
<!-- CSS外联式使用语法 -->
<link rel="stylesheet" type="text/css" href="main.css">
<!-- JS 内部式引入-->
<script type="text/javascript">
//js代代码
alert('你好 CSDN');//弹出对话框
//JS函数
// function fun(x,y) {
// return x+y;
//}
//alert(fun(10,20));
</script>
<!-- JS 外联式引入 -->
<script type="text/javascript" SRC="MyJs.js"></script>
<!-- JQuery的引用 -->
<script type="text/javascript" src="jQuery v3.3.1.js"></script>
</head>
<body><!-- body 主体 我们的网页内容在这里面书写 -->
<h1>水平线与换行符</h1><!--hx为标题标签 -->
<hr/><!--hr/：水平线标签（单标签） -->
看我画了两条线
<hr/>
看我开始换行啦
<br/><!--br/：换行标签（单标签） -->
我在这，啦啦啦
<h2>常见转义符</h2>
空格：
大于号：>
小于号： <
<h3>a标签</h3>
<!-- a标签
href：超级链接地址
target="_self" 本窗口访问（默认）
target = "_blank" 新窗口访问
-->
<a href="//blog.csdn.net/weixin_38950569/article/details/104435405">点击跳转到我的CSDN博客</a><！--在本窗口访问-->
<br/>
<a href="//www.baidu.com" target="_blank">点击跳转到百度</a><！--在新窗口访问-->
<h4>img标签</h4>
<!--
img标签:
src: 图片的地址
alt： 如果图片加载异常显示文字
-->
<img src="myimg.png" alt="图片加载失败" id="img_id1">
<h5>表格标签</h5>
<!--table标签：
border 边框
width 宽度
tr 行
th 表头
td 普通列
-->
<table border="1px" width="300px">
<tr>
<th>表头th</th>
<th>表头th</th>
</tr>
<tr>
<td>普通列td</td>
<td>普通列td</td>
</tr>
</table>
<h6>列表</h6>
<!--
u1 无序列表
o1 有序列表
li 列表项
-->
<ul class="ul_li">
<li>无序列表1</li>
<li>无序列表2</li>
</ul>
<ol>
<li>有序列表1</li>
<li>有序列表2</li>
</ol>
<h2>无意义标签</h2>
<!--
div 占用整行
span 不占用整行，长度取决于内部元素的长度
-->
<div>占整行</div>
<span>我有多长我占多少</span>
<!-- CSS使用语法之 内嵌式 -->
<div style="background: antiquewhite">div</div>
<span style="background: brown">CSS内嵌式使用方法</span>
<div id="id_div1">CSS内部式使用方法ID唯一</div>
<p>段落标签</p><!--p为段落标签 -->
<h3>表单1</h3>
<!--
form标签：
action 提交地址
method 请求方式（get或post，默认get）但是get会把封装的东西写在url里面不安全，post会加密封在head中
enctype="multipart/form-data" 如果提交文件，需要添加这个参数
-->
<form action="#" method ="post" enctype="multipart/form-data">
<!--
在表单中看可以放置的控件
文本框 type="text"
密码框 type="password"
单选框 type="radio"
复选框 type = "checkbox"
文件框 type ="file"
按钮 type="button"
提交 type="submit"
重置 type="reset"
下拉框 select 和 option
大文本 textarea
cols 列数
rows 行数
-->
1.用户名（text）：
<input type="text" name="username">
2.密码框（password）：
<input type="password" name="password">
<hr/>
3.性别（单选框）：<!--两个单选框要统一起来要让name一直 -->
男<input type="radio" name="grender" value="0">
女<input type="radio" name="grender" value="1" >
<hr/>
4.爱好（复选框）：
学web <input type="checkbox" name="hobby" value="web">
学python <input type="checkbox" name="hobby" value="python">
<hr/>
5.上穿头像（文件框）：
<input type="file" name="img">
<hr/>
6.按钮：
<input type="button" value="JS事件按钮" id="button_id1">
<hr/>
7.提交：
<input type="submit" value="提交按钮">
<hr/>
8.重置：
<input type="reset" value="重置按钮">
<hr/>
<select name="year">
<option value="2019">2019</option>
<option value="2020">2020</option>
</select>
<textarea name="comment" cols="30" rows="10"></textarea>
</form>
</body>
<!-- Js选择的使用-->
<script type="text/javascript">
divElement = document.getElementById("id_div1");
divElement.innerHTML="通过JS修改的内容";
</script>
<!-- JQuery 选择器
$("*") 选择所有
$("标签名") 标签选择器
$("#id值") ID选择器
$(".class值") 类选择器
-->
<!-- JQuery对象
1.JQuery对象习惯采用$开头，列如
$div = $("div")
2.JQuery对象格式是【Object】
3.JQuery对象转JS对象：
jsObject = $jqueryobject[0];
jsObject = $jqueryobject.get(0);
4.JS对象转JQuer对象
$$jqueryobject = $(jsobject);
-->
</html>JQuery的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的Html2</title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>
</head>
<boby>
<input type="button" value="JS事件按钮" id="button_id">
<input type="button" value="显示" id="button_show">
<input type="button" value="隐藏" id="button_hide">
<ul id="ul_id">
<li>无序列表1</li>
<li>无序列表2</li>
</ul>
<script type="text/javascript">
$buttonElement = $('#button_id');
$buttonElement.click(function(){
alert("我被点击了");
});
/*JQuery 显示 ，隐藏
show（speed，callback）
hide（speed，callback）
注：
callback：动画执行完的回调函数
speed：(动画执行的速度)
slow （慢速）
normal（默认值值，中速）
fast （快速）
*/
$button_show = $('#button_show');
$button_hide = $('#button_hide');
$ul = $('#ul_id');
$button_hide.click(function () {
$ul.hide("slow");
});
$button_show.click(function () {
$ul.show("slow");
});
/*
淡入淡出
fadeln(speed,callback) 淡入
fadeOut(speed,callback) 淡出
滑动
slideDown(speed,callback) 向下滑动
slideUp(speed,callback) 向上滑动
*/
</script>
</boby>
</html>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
