浅谈 HTML
来源：互联网 发布：罗马军团 知乎 编辑：程序博客网 时间：2024/05/24 01:22
html 详解
1：head 标签
添加 js
<head> 标签内 <script>
<title> 头部信息
<hr> 分割线
2：css 样式
内联样式： <p style="color:blue;margin-left:20px;">This is a paragraph.</p> style属性
元素背景色 <body style="background-color:yellow;">
字体 颜色 大小 <p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>
文本居中对齐 <h1 style="text-align:center;">居中对齐的标题</h1>
内部样式表： 在HTML文档头部 <head> 区域使用<style> 元素 来包含CSS
<style type="text/css">
body {background-color:witer;} 这里 body 表示的是整个标签内 最要不要这样用，因为一般很少有这种情况
p {color:red;}
table {color:red;}
</style>
外部引用：使用外部 CSS 文件
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
3:图片 <img src="http://www.runoob.com/images/pulpit1.jpg" alt="pic is loss" style="float:right" width="304" height="228" usemap="#planetmap" >
alt 是加载不到图片显示的内容 此标签为 空标签 不需要闭合 style="float:right" 浮动图片在左边或者右边
下面的map 是对于图片中设定位置下点击出现的连接
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="http://www.baidu.com">
<area shape="circle" coords="90,58,3" alt="Mercury" href="http://www.sina.com">
<area shape="circle" coords="124,58,8" alt="Venus" href="http://www.sohu.com">
</map>
4:表格：
tr 一行 td 一列
<table border="10" cellspacing="0"> border="1" 带有边框 cellspacing 单元间距 align 左右和中间位置
<tr>
<th>Header 1</th> 标题头部 都在这个table里 按列排列
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>一行一列
<td>row 1, cell 2</td>一行二列
</tr>
<tr>
<td>row 2, cell 1</td>二行一列
<td>row 2, cell 2</td>二行二列
</tr>
</table>
5：列表：
无序列表
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
有序列表
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
6： html 区块 div span
div
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">版权 © runoob.com</div> 分块
7: 表单 就是收集页面用户输入的部分
输入 <input type="text" name="name">
单选：
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
复选：
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>
提交：
<input type="submit" value="Submit">
文本域：
<textarea rows="10" cols="30">
我是一个文本框。
</textarea>
下拉选择：
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</select>
按钮：
<button type="button">点我!</button>
内嵌页面：
<iframe src="C:/Users/Administrator/Desktop/123.html" width="200" height="200"></iframe>
脚本： js
首先 在<script> 中编写脚本
然后在body 的标签中添加脚本的动作 onclick=脚本方法名()
--------------------------------------------------------------------------------------------
HTML 5 学习
1：head 标签
添加 js
<head> 标签内 <script>
<title> 头部信息
<hr> 分割线
2：css 样式
内联样式： <p style="color:blue;margin-left:20px;">This is a paragraph.</p> style属性
元素背景色 <body style="background-color:yellow;">
字体 颜色 大小 <p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>
文本居中对齐 <h1 style="text-align:center;">居中对齐的标题</h1>
内部样式表： 在HTML文档头部 <head> 区域使用<style> 元素 来包含CSS
<style type="text/css">
body {background-color:witer;} 这里 body 表示的是整个标签内 最要不要这样用，因为一般很少有这种情况
p {color:red;}
table {color:red;}
</style>
外部引用：使用外部 CSS 文件
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
3:图片 <img src="http://www.runoob.com/images/pulpit1.jpg" alt="pic is loss" style="float:right" width="304" height="228" usemap="#planetmap" >
alt 是加载不到图片显示的内容 此标签为 空标签 不需要闭合 style="float:right" 浮动图片在左边或者右边
下面的map 是对于图片中设定位置下点击出现的连接
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="http://www.baidu.com">
<area shape="circle" coords="90,58,3" alt="Mercury" href="http://www.sina.com">
<area shape="circle" coords="124,58,8" alt="Venus" href="http://www.sohu.com">
</map>
4:表格：
tr 一行 td 一列
<table border="10" cellspacing="0"> border="1" 带有边框 cellspacing 单元间距 align 左右和中间位置
<tr>
<th>Header 1</th> 标题头部 都在这个table里 按列排列
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>一行一列
<td>row 1, cell 2</td>一行二列
</tr>
<tr>
<td>row 2, cell 1</td>二行一列
<td>row 2, cell 2</td>二行二列
</tr>
</table>
5：列表：
无序列表
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
有序列表
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
6： html 区块 div span
div
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">版权 © runoob.com</div> 分块
7: 表单 就是收集页面用户输入的部分
输入 <input type="text" name="name">
单选：
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
复选：
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>
提交：
<input type="submit" value="Submit">
文本域：
<textarea rows="10" cols="30">
我是一个文本框。
</textarea>
下拉选择：
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</select>
按钮：
<button type="button">点我!</button>
内嵌页面：
<iframe src="C:/Users/Administrator/Desktop/123.html" width="200" height="200"></iframe>
脚本： js
首先 在<script> 中编写脚本
然后在body 的标签中添加脚本的动作 onclick=脚本方法名()
--------------------------------------------------------------------------------------------
HTML 5 学习
阅读全文
0 0
- 浅谈HTML
- 浅谈 HTML
- 浅谈HTML
- html学习浅谈
- 浅谈HTML和css
- 浅谈html/CSS
- 浅谈HTML-DOM
- 浅谈HTML知识体系
- 浅谈HTML语义化
- Html中浅谈浮动
- 浅谈html前端开发
- 浅谈MDN HTML
- 浅谈HTML与XHTML
- 浅谈HTML DOCTYPE
- 浅谈html规范
- 浅谈html中的标签
- 浅谈HTML的初步了解
- [33期] html+css浅谈
- #pragma once 与 #ifndef防止重编译区别
- 树 森林 二叉树转换
- Java中的ant详解
- linux 3.6 启动源码分析(三) setup_arch
- Java泛型中E、T、K、V等的含义
- 浅谈 HTML
- JSON之前台String和JSON对象的互相转化-yellowcong
- lucene.net 基本的读取索引
- libpng-warning-iccp-known-incorrect-srgb-profile 警告问题
- linux 3.6 启动源码分析(四) rest_init
- 计算机等级考试二级c考试操作题小注
- PXE+Kickstart无人值守安装系统
- 创建Html文档
- ABAP更改程序的请求包操作
