Html基础学习（基于W3school网络教程）
2018-06-24 02:09:35来源：未知 阅读 ()
//防止乱码
head中加入
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
//在head中使用外部样式表进行格式化
<link rel="stylesheet" type="text/css" href="xxxxx.css"/>
//使用html样式表进行格式化
<style type="text/css">
xxxx
</style>
//bgcolor定义背景颜色；background="xxxx"指定背景图片，如图片小于页面，图片会重复显示
//<p>标签</p>
段落标签。浏览器会忽略源代码中的排版，会省略多余的空格和换行等。
要想换行，可用<br/>来实现。
//h1-h6标题标签
<h1>h1标题标签</h1>
<h2>h2标题标签</h2>
<h3>h3标题标签</h3>
<h4>h4标题标签</h4>
<h5>h5标题标签</h5>
<h6>h6标题标签</h6>
注意：请仅仅把标题标签用于标题文本。不要仅仅为了产生粗体文本而使用它们。粗体可使用其它标签或 CSS 代替。
//文字居中
<h4 align="center">用align="center"将文字居中。</h4>
//hr标签用于加水平线
<hr />
//注释<!--XXXX-->
<!--注释不会在浏览器中显示。-->
//背景颜色
bgcolor="xxxx"
//背景图像
background="xxxx"
//链接
通过a标签href="xxxx"定义，在新窗口打开用target="_blank"
<a href="http://www.baidu.com" target="_blank">百度</a>
//图像
通过img的src定义，如果无法显示图片，则显示alt中的文字
<img src="xxxx" alt="xxxx" />
//文本格式化
<b>文本格式化，这是粗体文本bold，用b标签</b>
<strong>文本格式化，这是加重语气strong，用strong标签</strong>
<big>文本格式化，这是大号字big，用big标签</big>
<em>文本格式化，这是着重文字emphasized，用em标签</em>
<i>文本格式化，这是斜体文字italic，用i标签</i>
<small>文本格式化，这是小号字small，用small标签</small>
//预格式文本用pre标签
<pre>
这是
预格式文本。
它保留了 空格
和换行。
</pre>
//链接到同一页面的某位置，用name属性命名“锚”
<a href="#C4">查看 Chapter 4。</a>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>
<h2><a name="C4">Chapter 4</a></h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>
//表格用table，border为边框宽度,tr-th-td
<table border="1">
<tr>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
结果：
//横跨两列的单元格：
<table border="1">
<tr>
<th>姓名</th>
<th colspan="2">电话</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>55577854</td>
<td>55577855</td>
</tr>
</table>
结果：
//横跨两行的单元格：
<table border="1">
<tr>
<th>姓名</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">电话</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
</table>
结果：
//带有 单元格边距cellpadding：
<table border="1" cellpadding="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
结果：
//表格中元素的位置
<table width="400" border="1">
<tr>
<th align="center">消费项目</th>
<th align="center">一月</th>
<th align="center">二月</th>
</tr>
<tr>
<td align="left">衣服</td>
<td align="right">$241.10</td>
<td align="right">$50.20</td>
</tr>
<tr>
<td align="left">化妆品</td>
<td align="right">$30.00</td>
<td align="right">$44.45</td>
</tr>
</table>
//一个无序列表：
<ul>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
//一个有序列表，start为开始序号：
<ol start="50">
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol> <hr />
//Disc 项目符号列表：
<ul type="disc">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ul>
//Circle 项目符号列表：
<ul type="circle">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ul>
//Square 项目符号列表：
<ul type="square">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ul>
//数字列表：
<ol>
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ol>
//字母列表：
<ol type="A">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ol>
//小写字母列表：
<ol type="a">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ol>
//罗马字母列表：
<ol type="I">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ol>
//小写罗马字母列表：
<ol type="i">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ol>
//一个嵌套列表：
<ul>
<li>咖啡</li>
<li>茶
<ul>
<li>红茶</li>
<li>绿茶</li>
</ul>
</li>
<li>牛奶</li>
</ul>
//表单：form-input
文本域 text fields
密码域 password，密码在输入时显示*号
复选框 checkbox，是个小方框，checked可指定选项是否默认选定，可以通过点击选择或取消
单选按钮：radio，checked指定默认选项，点击其中一个按钮时，该按钮变为选中状态，其他所有按钮都变为非选中。
下拉列表：select-option，用selected可指定默认选定的选项。
文本域 textarea,rows高,cols宽
按钮 button
提交 submits
fieldset 周边带边框的效果
<form action="xxxx"> <!--如果省略 action 属性，则 action 会被设置为当前页面。method规定在提交表单时所用的 HTTP 方法GET或POST-->
<!--默认用GET方法。如果表单提交是被动的，没有敏感信息，比如搜索引擎查询。用GET时，表单数据在页面地址栏中是可见的。
如果表单正在更新数据，或者包含敏感信息（例如密码）。POST安全性好，因为页面地址栏中被提交数据是不可见的。-->
姓：<input type="text" name="firstname" /><br />
名：<input type="text" name="lastname"/> <br />
密码：<input type="password" name="password" /><br />
爱好 ：篮球<input type="checkbox" name="aihao" value="basketball" />足球<input type="checkbox" name="aihao" value="football" /><br />
性别 ：男<input type="radio" checked="checked" name="Sex" value="male" />女<input type="radio" name="Sex" value="female" /> <br />
请选择出生地：
<select name="place">
<option value="anhui">安徽</option>
<option value="jiangsu">江苏</option>
<option value="hubei" selected="selected">湖北</option>
<option value="jiangxi">江西</option>
</select>
简介：
<textarea name="jianjie" rows="2" cols="25">
这个人很懒，什么都没有留下！
</textarea>
<input type="button" value="Hello world!">
<input type="submit" value="提交"> <!--点击提交按钮后，会将数据提交到action中的页面。如果省略 action 属性，则 action 会被设置为当前页面。-->
<fieldset>
<legend>健康信息</legend>
身高：<input type="text" />
体重：<input type="text" />
</fieldset>
</form>
//排列图片：设置对齐方式的图像
<p>图像 <img src="https://www.baidu.com/img/baidu_jgylogo3.gif" align="bottom"> 在文本中，文字据下，为默认方式</p>
<p>图像 <img src ="https://www.baidu.com/img/baidu_jgylogo3.gif" align="middle"> 在文本中，文字居中</p>
<p>图像 <img src ="https://www.baidu.com/img/baidu_jgylogo3.gif" align="top"> 在文本中，文字局上</p> <hr />
<p>
<img src ="https://www.baidu.com/img/baidu_jgylogo3.gif" align ="left">
带有图像的一个段落。图像的 align 属性设置为 "left"。图像将浮动到文本的最左侧。
</p><hr />
<p>
<img src ="https://www.baidu.com/img/baidu_jgylogo3.gif" align ="right">
带有图像的一个段落。图像的 align 属性设置为 "right"。图像将浮动到文本的最右侧。
</p>
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
上一篇：前端兼容性的一些问题
下一篇：引入css的四种方式
- DIV居中的经典方法 2020-06-13
- Html/css 列表项 区分列表首尾 2020-06-11
- css与javascript重难点，学前端，基础不好一切白费！ 2020-06-11
- HTML骨架 2020-06-10
- 转行Web前端工程师要掌握的学习知识汇总 2020-06-10
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
