<link rel="stylesheet"href="css/common.css"/>
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代码简单的文本输入。
<!DOCTYPE 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="" 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>
<div class="nav"><a class="index" href="index.html">首页</a><a href="#">编程开发</a><a href="#">人生旅程</a><a href="#">摄影摄像</a><a href="#">电脑技巧</a><a href="" target="_blank">编程创造城市</a>
</div>
此处是创建导航栏操作，使用 a加上tab键就可以生成，#是填写链接网址的地方。
<div id="pics"><img src="img/a%20（1）.jpg" />
</div>
<body><button id="btnlike" onclick="dolike()">赞0</button>
</body>
<iframe id="ifweb" style="width: 100%;height: 43.75rem;" src=""></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/>性别:<!-- 单选框type使用radio的时候，name属性值如果相同，代表同一组 ，同一组的单选框同一时间只能选择一个--><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 按钮。
<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的内容。
<body><div class="logo">学习编程</div><div class="textdit" contenteditable="true">这里可以编辑<ul contenteditable="false"><li>网页设计</li><li>VB</li></ul></div>
</body>
contenteditable的值是一个布尔类型的true表示可以编辑，false表示不能编辑。默认情况下contenteditable=true后的子容器可以被编辑，例如ul；如果说子容器中有contenteditable=false的容器标签，那么这子容器不能被编辑。
简单的文本编辑效果可以使用h5的全局属性contenteditable，这个属性的编辑效果，可以直接在word复制进去看到效果，可以用在简单的文章编辑效果中。
<body><div class="log" id="log" data-ljy-db = "编程网站">编程数据</div><br/><button id="btndt" onclick="getljydata()">获取数据</button><button id="btndt2" onclick="dodata2()">text</button>
</body>
dom数据的存取在h5中直接使用data-自定义属性来存储数据的值，数据的获取需要配合js来获取，dom中存储数据一般都是临时使用的数据。
<body><!-- <table border="1" cellspacing="5" cellpadding="30"> --><table><!-- thead,和tbody主要用来控制样式 --><thead><tr><!--tr 行--><th>序号</th><!--th 表头控制--><th>兴趣</th><th>班级</th><th>姓名</th></tr></thead><tbody><tr><td>1</td><!--td 列--><td>撸猫</td><td>一</td><td>王子</td></tr><tr><td>2</td><td>LOL</td><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){}——表格的第五行。<body><div id="main"><!-- 也可以用 javascript：this.stop() --><marquee scrolldelay="1" scrollamount="40" loop="3" behavior="scroll" direction="up" οnmοuseοver="stop();"οnmοuseοut="javascript:this.start()"><img src="img/a%20（1）.jpg" ><img src="img/a%20（2）.jpg" ><img src="img/a%20（3）.jpg" ></marquee></div>
</body>
如上代码，是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"/>
快捷方式打出viewport。
<body><header><h1>标题、LOGO</h1></header><!-- 导航部 --><nav><!-- 栏目部 --><ul><li><a href="#">Vue</a></li></ul></nav><div class="content"><!-- 正文 --><section><article><!-- 适用于具有类似特征的元素块，这个是块级元素 --><!-- 用于标题组，如果有多个h标题在一起的时候 --><hgroup><h2></h2></hgroup><!-- 用于在正文的最后，强调文章的内容的，可以插入图片，视频等信息 --><figure><!-- 用于描述强调的图片，视频的小标题信息 --><figcaption></figcaption></figure></article></section><!-- 侧边栏 --><aside>噢噢</aside></div><footer>©zkzkzkzkzk</footer></body>
#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 。
<strong>赞</strong>——可以使其中的写入的内容加粗。<li>aaaaaa</li>——在输入的内容前面加上圆点。<br/>——换行符号 。 ——代表空格。<select></select>——创建下拉框外壳。<option></option>——创建下拉框内容。placeholder=""——是写在input标签中的，显示在文本框里的提示信息。dblclick——双击事件。<textarea></textarea>——多行文本。<input></input>——单行文本。<input type="checkbox">——单个复选框。<input type="radio">——单选按钮。<mark></mark>——突出显示特殊重要文字，给字体一个背影颜色；用于被浏览器收录后的快照 。<em><em>——表示强调，字体变成斜体了，易于被搜索引擎收录，代替以前的<i>。<b></b>——用于其他情况的加粗。<small></small>——最后版权声明使用。<cite></cite>——用于显示作品标题，一般还要带书名号。<address></address>——这个元素应该包含在<footer>标签中，表示合同信息。<time datetime="2019-10-12" pubdate="true">发布于2019-10-12</time>——时间标签，datetime表示机器可读时间戳，pubdate表示属性值得出版日期。<div class="btn btns1">登 录</div>——在html元素中的class属性,可以写多个css样式,依次从左到右的各个样式,用空格隔开，右边的css样式,会覆盖css左边的相同的css样式属性的值。本文发布于:2024-01-28 04:53:32，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/17063888164925.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
