css+html+js学习笔记---html
CSS+HTML+JS中关于HTML
关于连接css或者js文件
css/common.css是css文件夹的文件名称。而在hbuilderX中，只要打出link即可弹出提示，推荐把link写在中。
<div style="width:100px;margin: auto;">
<button class="btn" type="button">按钮button>
div>
css行内样式的写法如上：可以直接在某个标签容器中添加属性style=" "，然后直接在这个属性里面写css样式即可，这种写法不推荐
<script src="js/main.js" type="text/javascript" charset="utf-8">script>
js/main.js是js文件夹的文件名称。
js的页面级使用，script>标签直接写js代码简单的文本输入。
关于HTML结构
<html>
<head>
<meta charset="utf-8" />
<title>title>
head>
<body>
body>
html>
其中中间是放置的网页的头部，放置的是网页的标题，放置网页的主题部分。
DOCTYPE元素：如果浏览器支持h5，就强制使用h5风格，如果不支持，就不使用。
<body>
<div id="wrapper">
<div class="header">
<div class="logo">练习div>
<div class="nav">
<a class="index" href="index.html">首页a>
<a href="#">编程开发a>
<a href="#">人生旅程a>
<a href="#">摄影摄像a>
<a href="#">电脑技巧a>
<a href="http://ljy.kim" target="_blank">编程创造城市a>
div>
div>
<div class="main">中div>
<div class="footer">下div>
div>
body>
在使用hbuilderX书写html语言时，可以使用div#wrapper再加上tab键来生成
，其中wrapper是自己定义的一个id名称。同样的，可以使用div.logo再加上tab键来生成 。当使用这样的快捷生成时，div#wrapper > div.logo可生成： 此类包含的结构；
<div class="header">
<div class="logo">div>
div>
而使用，div.logo + div.nav 可生成： 此类平级的结构；
<div class="logo">
div>
<div class="nav">
div>
HTML的一些实例
导航栏
<div class="nav">
<a class="index" href="index.html">首页a>
<a href="#">编程开发a>
<a href="#">人生旅程a>
<a href="#">摄影摄像a>
<a href="#">电脑技巧a>
<a href="http://baidu.com" target="_blank">编程创造城市a>
div>
此处是创建导航栏操作，使用 a加上tab键就可以生成，#是填写链接网址的地方。
插入图片
<div id="pics">
<img src="img/a%20（1）.jpg" />
div>
创建一个点击按钮
<body>
<button id="btnlike" onclick="dolike()">赞0button>
body>
iframe
<iframe id="ifweb" style="width: 100%;height: 43.75rem;" src="http://ljy.kim">iframe>>
iframe就是一个html框架，里面可以承载一个网页。iframe标签可以用在表单提交处理信息，可以用在访问其他网址，内容可以呈现html显示出来的风格。
表单
<div class="wrapper">
<h1>注册信息h1>
<form action="data/doreg.php" target="_blank" method="post" >
账号:<input class="text" name="username" id="username" value="" placeholder="注册用户名" />
<br/>
密码:<input class="password" name="password" id="password" value="" placeholder="密码" />
<br/>
国家:<select name="country">
<option value="CN">中国option>
<option value="USA">美国option>
<option value="UK">英国option>
select>
<br/>
性别:
<input class="op" type="radio" name="sex" id="sex1" value="1" />男
<input class="op" type="radio" name="sex" id="sex0" value="0" />女
<br/>
爱好:
<input class="op" type="checkbox" name="hobby" value="1" />编程
<input class="op" type="checkbox" name="hobby" value="1" />唱歌
<input class="op" type="checkbox" name="hobby" value="1" />popping
<br/>
<input class="sb" type="submit" value="提交"/>
form>
div>
表单的作用，主要功能：用来存放需要提交给服务器的元素。form表单提交的是，内部带有name标签的元素给服务器页面，action对应的页面。数据提交方式method的值为post的时候可以提交大量的数据，如果数据较少，就使用get
表单中可以存放：input，type各种类型；select，option下拉列表；textarea 文本域，可以多行；button 按钮。
contextmenu右键菜单
<body>
<div contextmenu="ljybcmenu">
好好学习
<menu type="context" id="ljybcmenu">
<menuitem label="零基础VB教程">menuitem>
<menuitem label="HTML5+css+div+js教程">menuitem>
<menuitem label="java教程">menuitem>
<menuitem label="高职考技能提升">menuitem>
menu>
div>
body>
-
Menu标签type=“context”；
-
Menuitem项label=“项目内容”；
-
注意menu的ID要对应contextmenu的值；
-
右键菜单必须采用menu标签模块，每一项的内容必须使用menuitem
注意：contextmenu右键菜单目前只支持火狐浏览器，右键菜单的书写模式非常严格，便签不能随便使用，能修改的就是label的内容。
contenteditable文本编辑
<body>
<div class="logo">学习编程div>
<div class="textdit" contenteditable="true">
这里可以编辑
<ul contenteditable="false">
<li>网页设计li>
<li>VBli>
ul>
div>
body>
contenteditable的值是一个布尔类型的true表示可以编辑，false表示不能编辑。默认情况下contenteditable=true后的子容器可以被编辑，例如ul；如果说子容器中有contenteditable=false的容器标签，那么这子容器不能被编辑。
简单的文本编辑效果可以使用h5的全局属性contenteditable，这个属性的编辑效果，可以直接在word复制进去看到效果，可以用在简单的文章编辑效果中。
data-属性，自定义数据
<body>
编程数据div>
<br/>
<button id="btndt" onclick="getljydata()">获取数据button>
<button id="btndt2" onclick="dodata2()">textbutton>
body>
dom数据的存取在h5中直接使用data-自定义属性来存储数据的值，数据的获取需要配合js来获取，dom中存储数据一般都是临时使用的数据。
table表格
<body>
<table>
<thead>
<tr>
<th>序号th>
<th>兴趣th>
<th>班级th>
<th>姓名th>
tr>
thead>
<tbody>
<tr>
<td>1td>
<td>撸猫td>
<td>一td>
<td>王子td>
tr>
<tr>
<td>2td>
<td>LOLtd>
<td>二td>
<td>吴世td>
tr>
tbody>
table>
body>
用css来渲染table：
table tr td:nth-child(odd){}——nth-child()伪类:用来选择第几项,参数中可以填写数字或者奇偶。此处为选择表格中的基数项,如果是even则为偶数项。table tr:first-child{}——表格的第一项。table tr td:last-child{}——表格的最后一项。table tr:nth-child(5){}——表格的第五行。
html的滚动标签：marquee
<body>
<div id="main">
如上代码，是marquee鼠标事件，鼠标经过(悬停)事件‘onmouseover’让图片停止运动 js的stop方法，鼠标离开事件 ‘onmouseout’让图片开始运动 js的start方法 。其中：
behavior="alternate" 上下或左右循环运动；behavior="scroll" 一个方向的运动；behavior="slide" 一个方向运动一次 。
而scrolldelay="1" scrollamount="40"用来控制速度的联动效果，表示每隔一毫秒，运动40像素。loop表示运动循环的次数。
网页自适应各个设备
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" media="max-width:500px" href="css/main.css"/>
- width=device-width:宽度等于当前设备的宽度；
- height=device-height:高度等于当前设备的高度；
- initial-scale=1:初始的缩放比例(默认的设备为100%)；
- minimum-scale=1 允许用户缩放到的最小比例。
- maximum-scale=1 允许用户缩放到的最大比例。
- user-scalable=no 用户是否可以手动缩放(默认设置为no，用户不能放大缩小页面)。
快捷方式打出viewport。
H5中的布局标签
<body>
<header>
<h1>标题、LOGOh1>
header>
<nav>
<ul>
<li><a href="#">Vuea>li>
ul>
nav>
<div class="content">
<section>
<article>
<hgroup>
<h2>h2>
hgroup>
<figure>
<figcaption>
figcaption>
figure>
article>
section>
<aside>
噢噢
aside>
div>
<footer>
©zkzkzkzkzk
footer>
body>
弹性框架-box
#wrapper{
/* 最大宽度为960px */
max-width: 960px;
display: -moz-box;
display: -webkit-box;
/* 改变box弹性框布局中内部元素的排列方式，orient表示方向，vertical表示纵向，horizontal表示横向（默认） */
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
/* 让box弹性框内部元素100%显示，box-flex表示按比例显示，1就是一份，2就是两份，但0表示固定宽度，不是0就表示可变 */
-moz-box-flex: 1;
-webkit-box-flex: 1;
/*元素宽度的计算公式=border边框大小+padding内边距大小+width宽度+margin外边距大小
在使用box-sizing：border-box；之后，新的元素宽度计算公式=width宽度+margin外边距大小。 */
box-sizing: border-box;
/* 兼容谷歌，苹果的浏览器 chrome,safari*/
-webkit-box-sizing: border-box;
/* 兼容火狐的浏览器firebox */
-moz-box-sizing: border-box;
}
body{
/* 在body中,让整个内部框架居中的方式——弹性框的布局 */
display: -moz-box;
display: -webkit-box;
/*水平居中 */
-moz-box-pack: center;
-webkit-box-pack: center;
/*垂直居中 */
-moz-box-align: center;
-webkit-box-align: center;
/* 自适应 */
-webkit-box-pack: justify;
-moz-box-pack: justify;
/*居左*/
-webkit-box-pack: start;
-moz-box-pack: start;
/* 居右*/
-webkit-box-pack: end;
-moz-box-pack: end;
/* 排版逆向 */
-webkit-box-direction:reverse;
}
#wrapper .box3 {
/* 数字代表先后顺序,越大越排在后面 */
-webkit-box-ordinal-group:2 ;
}
#wrapper>section article:hover{
/* 使用box-shadow至少要使用三个值,分别是颜色,水平偏移距离,垂直偏移距离 ——偏移值如果是负值就是反方向偏移*/
/* box-shadow一共有五个值——box-shadow:颜色,水平偏移距离,垂直偏移距离,模糊像素值,内部(inset)或外部阴影(不用写这个值,默认就是外部) */
box-shadow: gray 5px 5px 30px;
padding: 10px;
border-radius: 10px;
}
box中默认子容器横向排列，box:相当于块级元素，类似于block ；inline-box 同一行的元素，类似于inline-block。
主流浏览器的前缀: -moz- firebox火狐； -webkit- safari和chrome ； -o- opera；-khtml- koqueror；-ms- IE； -chrome- chrome 。
HTML中的一些用法
- target = “_blank” : 加上之后，点击链接能打开一个新的窗口转到网址，不加的话会覆盖当前网页。
- Html标题标签有h1 h2 h3 h4 h5 h6特点是默认加粗上下留白，默认有换行
赞——可以使其中的写入的内容加粗。- aaaaaa
——代表空格。placeholder=""——是写在input标签中的，显示在文本框里的提示信息。dblclick——双击事件。登 录——在html元素中的class属性,可以写多个css样式,依次从左到右的各个样式,用空格隔开，右边的css样式,会覆盖css左边的相同的css样式属性的值。