本文详细讲解了Web开发的基础，包括HTML的标签结构、CSS的样式控制和JavaScript的行为实现。从HTML的超文本标记到XHTML的严格语法，再到核心元素如h1标题、p段落等的使用，以及表单、图片链接和列表的创建，为初学者提供了一个全面的入门指南。
一：web标准
web的标准包括三个方面:结构(html) ,表现（css），行为（JavaScript）
注：1）w3c --万维网联盟（制定了html和css相关的标准）
2）ECMA--欧洲电脑厂商联合会（制定了JS相关的一些基本的标准）
二：html的相关概念
1.HTML--超文本标记语言
2.XHTML--可扩展的超文本标记语言
注：与html相比，语法要求更加严格
三：html基本结构
1.文档说明
注：h5的文档声明<!DOCTYPE html>
2.网页的根元素<html></html>,根元素包含了head和body两大部分
四：html语法
1.常规标记（双标记）
语法:<h1 class='tit>hello world</h1>
2.空标记（单标记）
语法：<input type='text'>
五：html常用标记
1.文本标题
eg：<hx></hx> x代表1-6
2.段落文本
eg: <p>文本内容</p>
3.加粗文本
eg: <b>内容</b> <strong>内容</strong>
4.倾斜文本
eg: <i>内容</i> <em>内容</em>
5.强制换行
eg: <br>
注：转义字符空格
扩展： 版权符号 © 注册商标 ®
扩展：水平分隔线 <hr> 上标 <sup></sup> 下标 <sub></sub>
6.无序列表
eg: <ul type="disc|circle|square">
<li>aaa</li>
...
</ul>
注：disc 实心圆 circle 空心圆 square 实心方块
7.有序列表
eg: <ol type="1|I|i|A|a" start="1|数值">
<li>aaa</li>
...
</ol>
8.自定义列表
eg: <dl>
<dt>名词</dt>
<dd>解释...</dd>
...
</dl>
9.插入图片
eg: <img src="1.jpg" width="200" height="120" alt="hello" title="你好">
注： a) src 引入图片路径
b) width和height 设置图片的宽度和高度
c) alt 当图片加载失败时显示的文本内容
d) title 当鼠标悬停在图片上时显示的文本内容
10.超链接
eg: <a href="http://www.baidu.com" target="_blank">百度一下</a>
注： target="_blank" 设置超链接在新窗口打开
五、表单
<form>...</form>
1.文本框
eg: <input type="text" placeholder="请输入手机号">
注： placeholder用来设置默认显示的文本
2.密码框
eg: <input type="password" placeholder="请输入密码">
3.提交按钮
eg: <input type="submit" value="登录">
注：value用来设置按钮上的文字内容
4.单选按钮
eg: <input type="radio" name="aa">
注：一组中的单选按钮必须要添加一致的name属性值，才能达到多选其一的效果
5.复选按钮
eg: <input type="checkbox">
注：checked="checked" 给单选或复选按钮添加默认选中状态
6.重置按钮
eg: <input type="reset">
7.普通按钮
eg: <input type="button" value="***">
注：本身不具备任何功能，通常结合js点击事件来使用
8.下拉列表
eg: <select>
<option selected>aa</option>
...
</select>
9.文本域（多行文本输入框）
eg: <textarea cols="30" rows="10" style="resize:none;"></textarea>
注：style="resize:none;" 禁止用户拖拽改变文本域大小
注：disabled="disabled" 给表单元素设置禁用状态
六、表格
作用：用来显示数据
eg: <table border="1" cellspacing="0" width="600" height="200">
<tbody align="center">
<tr height="60">
<td>aaa</td>
...
</tr>
...
</tbody>
</table>
注：a) border="数值" 设置表格的边框
b) cellspacing="数值" 设置单元格间距
c) align="left|center|right" 设置单元格内容水平对齐方式
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
