首先在开始写之前给大家推荐一个很好用的网站,叫菜鸟网站,如果有兴趣的话可以去那里面去学习相关知识,非常全面。
在html中有很多标签,我自己的理解的话感觉这个东西有点像Java中的那些对象的属性值,它们穿插在一起来构成丰富多彩的网页。然后就是在html中的书写相较于Java中的书写比较"随意"一点,对于它的学习的话多查查官方文档以及我上面推荐的那个网站,对于基础学习这已经足够了。最后就是软件了HBuilderX你值得拥有。
对于标签的话我这里就介绍一些基础的写一下,多的话我自己也没有多少积累,大家共勉吧!
首先就是table了
<table border="" cellspacing="" cellpadding=""> <tr><th></th></tr> <tr><td></td></tr> </table>
cellpadding pixels 规定单元边沿与其内容之间的空白。
cellspacing pixels 规定单元格之间的空白。
tr规定的是表格的行数,th严格意义上跟td效果一样,td表示的表格的列数,而th同样用于表格的列数只是它用于表头,通俗点的话就是一个表格的首行的项目说明。
接下来就是font
它是用于修饰字体的,比如
<font color="red" size="7" face="楷体">Hello HTML</font>
像上面color代表颜色,size代表大小,如果你要用数字的话它有个最大跟最小值,这里推荐后面加上px等单位来修饰大小,及调试方便又没有什么限制。
接下来就是标题标签(h<1>里面的数字范围1-6)段落标签(p)上标下标标签(23 <font size="7">2<sup>3</sup><font>
H2O<font size="7">H<sub>2</sub>O</font>
)
预编译标签(pre) 转意字符(   转意字符表示空格< > © 版权符™ TM ;" 双引号)
接下来我重点会写一下表单标签,它的效果是这酱的:
因为我自己忘的比较快所以着重调教一下
在开始写之前我仔细敲了一下整段代码分为下面几部分:
.form该指令中的action很明显是一个后台链接,当用户完成注册时将信息发送到后台该链接,get则是将信息拼接在一起放在链接后提交,例如这样(http://127.0.0.1/?username=道济&password=1212&sex=n&555=333&555=444&555=555&xueli=chang), 此外method的另一种方式则是post,它则是将信息放到请求体里面提交,本身在网页上是看不到的
<form action="http://127.0.0.1/" method="get">
接下来就是input的各种类型了:
用户名称:<input type="text" name="username" id="11" value="" placeholder="你是阿福吗" /><br>
启动密码:<input type="number" name="password" id="22" value="" placeholder="你是暴风城勇士吗" /><br >
性别:<input type="radio" name="sex" id="dark" value="nan" checked="checked" /> <label for="nan">男</label>
<input type="radio" name="sex" id="dark" value="n" /> <label for="n">女</label><br>
口头禅:<input type="" name="" id="" value="人的欲望就像高山滚石一样一旦开始就再也停不下来了" /><br>
生日:<input type="date" name="" id="" value="" /><br>
孙悟空有几个女妖朋友啊:<input type="number" name="" id="" value="" min="100"/><br>
绝招: <input type="checkbox" name="555" id="黑海深渊" value="333" /><label for="黑海深渊">黑海深渊</label>
<input type="checkbox" name="555" id="嘴炮" value="444" /><label for="嘴炮">嘴炮</label>
<input type="checkbox" name="555" id="玄冥黑洞" value="555" /><label for="玄冥黑洞">玄冥黑洞</label><br>
这里要提的就几个标签是placeholder(它是在你未填写信息时显示的内容)br(换行符) checked(默认选择项),,此外多个复选框的name属性值要一样。
最后就是收尾了
<select name="xueli">
<option value ="">--请开始你的表演--</option>
<option value ="chang">唱</option>
<option value ="tiao">跳</option>
<option value ="rap">rap</option>
<option value ="bujingyun">步惊云式坐姿</option>
</select><br>
<input type="submit" name="" id="" value="注册" />
<input type="reset" name="" id="" value="重置" />
</form>
这里要说明一点是当用户完成注册后浏览器发送的信息都是经过编码的,如果要翻译该信息可以用下面的指令:
decodeURI 和encodeURI,一个是翻译一个是编译。
接下来就是背景标签,常用的有背景颜色(background-color)和背景图片(background-image)
不太常用的滚动标签
<marquee behavior="scroll" direction="up" align="center">
滚动标签可以使标签内的内容按照一定的样式在屏幕中滚动起来,多用于文字,
超链接标签:
<a href="http://www.baidu.com" target="_blank">百度</a>
如上代码所示,herf表示的是要进入的链接, target则表示打开的页面在新窗口打开_blank 还是在本窗口打开_self。
接下来就是单元格之间的合并
<td rowspan="2">Data</td>
<td colspan="2">Data</td>
rowspan代表上下合并,colspan代表左右和并,数字代表要合并的格子数,和并之后将合并的其他项删除即可。
列表标签了:
<!-- 无序列表
type 列表项前面的小图标
-->
<ul type="circle">
<li>列表项目</li>
<li>列表项目</li>
<li>列表项目</li>
<li>列表嵌套
<ol>
<li>列表项目</li>
<li>列表项目</li>
</ol>
</li>
</ul>
<!-- 有序列表
type 设置列表项前面的各种序号 比如 数组,大小写字母,罗马字母
start 序号从几开始
-->
<ol type="I" start="6">
<li>列表项目</li>
<li>列表项目</li>
<li>列表项目</li>
</ol>
<!-- 自定义列表 -->
<dl>
<dt>列表标签</dt>
<dd>列表的描述</dd>
<dt>列表标签</dt>
<dd>列表的描述</dd>
</dl>
锚点链接
这个标签就是我们在看电子书时想看第几章时一点它直接就能跳到该章节,这个功能用锚点就能做到
<ul>
<li><a>第一章</a></li>
<li><a href="#er">第二章</a></li>
<li><a>第三章</a></li>
</ul>
<a name="er"></a>
很简单,在你想跳转的地方加上a标签,name名字取好,再在跳转列表的a标签的链接处写入name名字(记得前面加#),这样当你要跳转是只要一点跳转列表的某一项它就会像你设定的链接处跳转。如果跳转的位置不理想的话可以尝试调整a标签的位置来改变。
图片标签:
<img src="img/c1.jpg" alt="波多野结衣照片" name="骗你的" title="七尺壮汉照片"/>
src 图片的地址, alt 是图片无法显示时的文字代替, title是 鼠标移动上图片后,会有文字提示
分割线:
<hr color="red" size="1px" width="50%" align="center" noshade="noshade" />
color 颜色,size 线的宽度,width 线的长度可以用像素 也可以用百分比。align=“left” 线条的对齐方式 left center right,noshade=“noshade” 线条的阴影。