• 再回首HTML


    前言

        本阶段视频自己前后看了两遍,感觉效果还是不错的,鉴于昨天上午整理了一些笔记,对HTML的理解深刻了一些。所以在这篇博文中就不再解释关于HTML一些定义的东西,这篇博文主要记录一些常用标记,为以后Web开发起个好头。

    内容

    HTML元素的四种形式

     

    <span style="font-family:KaiTi_GB2312;font-size:18px;"><br><!--空元素-->
    <hr color="blue"><!--带有属性的元素-->
    <title>http://www.sunxin.org</title><!--带有内容的元素-->
    <font color="red">http://www.sunxin.org</font><!--带有内容和属性的元素--></span>

    文档体

     

    <span style="font-family:KaiTi_GB2312;font-size:18px;"><html><!--开始HTML文档-->
    
    	<head><!--开始文档头部-->
    
    		<title><!--开始文档标题-->
    
    			name
    
    		</title><!--结束文档标题-->
    
    	</head><!--结束文档头部-->
    
    	<body><!--开始文档体-->
    
    		zhoulitong
    
    	</body><!--结束文档体-->
    
    </html><!--结束HTML文档--></span>

    提示:

        在HTML文档中:

    • 编写HTML时,在某些情况下不按照HTML框架格式,目前我们用的浏览器(例如:IE)能够很好的解析文档。
    • 标签的属性是可选的,可以不写反之也可以。
    • 标签和名字的大小写无关。
    • 给标签赋值的时候,可以加双引号,也可以不加。如下:

    <span style="font-family:KaiTi_GB2312;font-size:18px;"><hr color="blue">
    <hr color=blue></span>

    字体、段落换行、居中的应用

    举例子说明:

    <span style="font-family:KaiTi_GB2312;font-size:18px;"><html>
    	<head><title>静夜思</title></head>
    	<body>
    	<center><!--居中显示-->
    	<h2><font color="red">静夜思</font></h2><!--二级标题-->
    		          <b>作者:李白</b><!-- 为空格-->
    	<hr color="blue">
    	<p>
    	<b><i><font color="green" size ="3">窗前明月光,疑是地上霜。<br><!--粗体、斜体3号字显示文本-->
    	举头望明月,低头思故乡。</font></i></b>
    	</center>
    	</body>
    <html></span>

    显示结果:


    列表—建立带有项目符号的列表

    • disc   ——显示为实心的圆圈
    • square ——显示为实心的方块
    • circle ——显示为空心的圆圈

    举例:

    <span style="font-family:KaiTi_GB2312;font-size:18px;"><ol start="10">
    	<li>《红楼梦》
    	<li>《三国演义》
    </ol>
    
    <ol type="I">
    	<li>《红楼梦》
    	<li>《三国演义》
    </ol>
    
    <ol type="a">
    	<li>《红楼梦》
    	<li>《三国演义》
    </ol>
    
    <ul type="disc">
    	<li>《红楼梦》
    	<li>《三国演义》
    </ul>
    
    <ul type="square">
    	<li>《红楼梦》
    	<li>《三国演义》
    </ul>
    
    <ul type="cricle">
    	<li>《红楼梦》
    	<li>《三国演义》
    </ul></span>

    一些常用按钮和表格的应用

    下面的例子:

    <span style="font-family:KaiTi_GB2312;font-size:18px;"><html>
          <body>
    	  <form method="get" action="reg.jsp">
                    <table>
    
    		<tr>
    		<td>用户名:</td>
    		<td><input type="text" name="user" value="游客" size ="30"></td>
    		</tr>
    
    		<tr>
    		<td>密  码:</td>
    		<td><input type="password" name="name"></td>
    		</tr>
    
    		<tr>
    		<td>性  别:</td>
    		<td>
    		<input type="radio" name="sex" value="1" checked>男
    		<input type="radio" name="sex" value="0">女
    		</td>
    		</tr>
    
    		<tr>
    		<td>兴趣爱好:</td>
    		<td>
    		  <input type="checkbox" name="interest" value="football">足球
    		  <input type="checkbox" name="interest" value="basketball">篮球
    		  <input type="checkbox" name="interest" value="volleyball">排球
    		  <input type="checkbox" name="interest" value="swim">游泳
    		</td>
    		</tr>
    
    		<tr>
    		<td>最高学历:</td>
    		<td>
    		<select size="1" name="education">
    		  <option value="" selected>...</option>
    		  <option value="高中">高中</option>
    		  <option value="大学">大学</option>
    		  <option value="硕士">硕士</option>
    		  <option value="博士">博士</option>
    		</select>
    		</td>
    		</tr>
    
    		<tr>
    		<td>个人简历:</td>
    		<td><textarea name="personal" rows="5" cols="30"> 个人简历</textarea>
    		</td>
    		</tr>
    
    		<tr>
    		<td><input type="reset" value="重写"></td>
    		<td><input type="submit" value="注册"></td>
    		</tr>
    	</form>
          </body>
    </html></span>

    显示结果


    小结

        1、每次重复都有新的发现,学习就是不断重复的过程。

        2、成功有时候贵在实践。


    感谢您的宝贵时间~~~

  • 相关阅读:
    加解密的使用工具总结
    Java Base64编码解码实现
    Java 获取各时区时间,获取当前时间到格林威治时间1970年01月01日00时00分00秒的秒数
    关于时区的时间的详解,比如UTCGMT等
    JAVA帮助文档全系列 JDK1.5 JDK1.6 JDK1.7 官方中英完整版下载
    HTTP请求报文和HTTP响应报文
    一名全栈工程师Node.js之路-转
    使用zlib模块实现HTTP服务端与客户端实现传输数据压缩
    为什么要搭建自己的缓存管理模块?
    js 跨域问题常见的五种解决方式
  • 原文地址:https://www.cnblogs.com/zhoulitong/p/6412414.html
Copyright © 2020-2023  润新知