html所有总结
html总结
基本结构javascript
1.简单的基本结构css
<html>
<head>
<title>标题</title>
</head>
<body>
网页主体内容
</body>
</html>
head不打印在网页上面，只有body里面的文字内容打印在网页上面
<hr/>是分割线
添加背景元素的话须要添加在body开始标签的后面
好比<body bgcolor=“red”>
语法：<标签名 属性名1=“属性值” 属性名2=“属性值>……</标签名>
html
文档类型声明
<!DOCTYPE html>声明必须放在html文档的第一行
java
网页编码设置
在<head></head>标签之间添加<meta http-equiv=“Content-Type” content=“text/html;charset=utf-8”>
utf-8能够换成你想要的编码
css3
文字和段落标签
文字斜体：<i></i>,<em></em>
文字加粗：<strong></strong>,<b></b>
下标：<sub></sub>
上标:<sup></sup>
⚠：<i></i>只是斜体而已，<em></em>更多表示强调！！！！！！
⚠：<b></b>只是斜体，<strong></strong>表示强调浏览器
特殊符号：那好比说你想在网页上打印出来<p></p>的这种属于标签的内容
你是没法打印出来的由于这时候它们会自动被读取
因此你须要用特殊的符号来代替里面的一些符号
好比：< < 小于或显示标记> > 大于或显示标记® 已注册© 版权&trade 商标  空格服务器
标题标签：<h1></h1>~<h6></h6>
段落标签：<p></p>:表明同一个段落文字app
align对齐属性：
left 左对齐内容
right 右对齐内容
center 居中对齐
justify 对行进行伸展编辑器
属性的例子：<p align=“left”></p>
表示这个段落左对齐了ide
换行标签<br/>
<pre></pre>:不须要输入空格代码和<br/> 保留编辑器里的文本格式
因此多用于书写代码
列表标签
列表分为有序列表，无序列表，和定义列表
1.有序列表是<ul></ul>中间以<li></li>来区分每一项
type属性值
- 1 数字1，2.....
- a 小写字母
- A 大写字母
- i 小写罗马数字
- I 大写罗马数字
2.无序列表是<ol></ol>中间也是以<li></li>来区分每一项
无序列表的type属性
- disc 圆点
- square 正方形
- circle 圆形
3.定义列表<dl></dl>中间以<dt></dt>来定义列表项，<dd></dd>来列表项描述
- <dd></<dd>和<dt></dt>他们是平级，因此不能够互相包含
- <dt>能够有多个<dd>
图像标签：
语法：<img src=“” alt=“”…../>
img属性
- src url 显示图像url（分为相对路径和绝对路径）
- alt 文字 图像代替文本
- height 数值和百分比 图像的高
- width 数值和百分比 图像的宽
- alt：当用户没法查看图像，alt属性能够代替图像显示在浏览器中的内容
锚连接
同一个页面：
由一个连接跳转到另一个
语法：<a href= “”>内容</a>
属性：
- href 连接地址,能够连接网站内部或者外部连接
- target 连接的目标窗口
- title 连接提示文字
- name 连接命名
定义锚：
<a href=“#锚名1>目录1</a> <a href=“#锚名2>目录2</a>从这两个开始跳转 <a href=“….” name =“锚名1”>内容</a> xxxxx xxxxxxxx <a href=“….” name =“锚名2”>内容</a> xxxxx xxxxxxxx
锚名的位置定义了锚开始的位置
总结：
1.定义锚的位置和锚名
2.设置寻找锚的连接
不一样网页：
定义锚：
网页1:<a herf=“网页名称＃锚名>……</a>从网页1跳转到网页2 网页2:<a herf =“….” name=“锚名“>……</a>被跳转的那个页面
电子邮件连接：<a herf=“mailto;邮件地址“>……</a>
在本网站的内部跳转：站内连接
站内和站外连接：
e.g.
站内连接：
假设从网页1跳转到网页2
网页1: <a herf =“html12.html”><img src =“img/html/jpg” alt =“html基础课程“ width=“50px” height=“80px”/></a> 网页2: 地址在html12.html
外部网站连接：
（好比友情连接）（通常使用绝对路径）<a herf=“http://………..>……</a>
空连接：<a href =“#”>……</a>
不会发生任何跳转
可是会保留连接的特色
target属性：
默认状况下打开一个新的页面是在当前页面打开咱们想要的
target拥有的属性：_self,_blank,_top,_parent
_self(当前窗口打开）
_blank(新页面打开）
html表格
好比购物单就是用表格建立的
表格主要的标签：
`<table>表格
<tr>行
<td>单元格`
基本语法与结构
<table>
<tr>
<td>…….</td>
…………………
</tr>
<tr>
<td>………</td>
………………….
…………………..
</tr>
</table>
e.g.建立两行三列标签
<table border=“1”>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td><／
td>
</tr>
</table>
表格的操做：
- 带表头的表格：<th></th>:表格头，内容居中，加粗显示
- <caption>……</caption>：表格标题，居中显示，放在table下面，每个table只有一个caption
表格结构标签：
表格划分三部分：表头，主体，脚注
－thead：表格的头（放表格的表头）
－tbody：表格的主体（放数据本体）
－tfoot：表格的脚（放表格的脚注）
e.g.
<table>
<caption>….</caption>
<thead>
<tr>
<th>表头</th>
</tr>
</thead>
<tbody>
<tr>
<td>主体</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>脚注</td>
</tr>
</tfoot>
</table>
这三个标签不会影响布局，主要功能是加载
无论body仍是head仍是foot改变书写顺序，thead老是在表格最上方
<table>表格属性： Width pixels,% 规定表格的宽 align Left,center,right 表格对齐方式 border pixels 表格边框宽度 Bgcolor rgb(x,x,x),Colorname 表格背景颜色 Cellpadding Pixels,% 单元边沿与其内容之间的空白 cellspacing Pixels,% 单元格之间的空白 frame 属性值 规定外侧边框的哪个部分是可见的 rules 属性值 规定内侧边框哪个部分是可见的
Frame： void 不显示外侧边框 above 显示上部的外侧边框 below 显示下部的外侧边框 hsides 显示上部和下部的外侧边框 vsides 显示左边和右边的外侧边框 lhs 显示左边的外部边框 rhs 显示右边的外部边框 box 在全部四个边上显示外侧边框 border 在全部四个边上显示外侧边框
rules: none 没有线条 groups 位于行组和列组之间的线条 rows 位于行之间的线条 cols 位于列之间的线条 all 位于行和列之间的线条
<tr>标签属性：
align Left,center,right,justify,char 行内容的水平对齐
Valign top,middle,bottom,baseline 行内容的垂直对齐
Bgcolor rgb(x,x,x),#xxx,colorname 行的背景颜色
<td> 和 <th>标签属性
align
valign
bgcolor
width
height
跨列属性colspan：
e.g.
td colspan =“2”
就是说把两列合并成一列，多余的那个删掉
跨行属性rowspan：
把行合并在一块儿，多余的那个删掉
表格嵌套：
<table>
<tr>
<td>……</td>
<td>
<table>
<tr>
<td>…….</td>
<td>………</td>
</tr>
</table>
</td>
</tr>
</table>
必须是完整的表格，而且只能放在td当中
表单
建立表单：
<form>
表单元素
</form>
⚠：表单自己不可见
咱们网页里看到的是表单元素
表单元素添加：
<input> 表单输入标签 <select> 菜单和列表标签 <option> 菜单和列表项目标签 <textarea> 文字域标签 <optgroup> 菜单和列表项目分组标签
<input type=“类型属性” name=“名称”……../> <input>标签： type属性值： text 文字域 password 密码域 file 文件域 checkbox 复选域 radio 单选域 Button 按钮 Submit 提交按钮 Reset 重置按钮 Hidden 隐藏域 image 图像域 单行文本域： Name 文本域的名称 Maxlength 指用户输入的最长字符长度 Size 指定文本框的宽度 Value 指定文本框的默认值 Placeholder 规定用户填写输入字段的提示 哪一个里面放input哪一个是默认选项 name 确认哪一组数据是同一组
图像域：
<input type=“image” name=“…..” src=“imageurl”/> 隐藏域： <input type=“hidden” name=“….” value=“……”/> 用户看不到 value：里是传给服务器的值
下拉菜单和列表标签：
例如：城市的选择
<select> and <option>
语法：
<select>
<option value=“….”>选项</option>
<option value=“….”>选项</option>
……
</select>
<select>标签属性：
name 设置下拉菜单和列表的名称 multiple 设置可选择多个项目 size 设置列表中可见选项的数目（至关于一次能够看到几个） <option>标签属性 selected 设置选项初始选中状态（看到的第一个就是他） value 定义送往服务器的选项值
分组下拉菜单和列表标签：
<select name=“”>
<optgroup label=“组1“>
<option value=“….”>选项</option>
<option value=“….”>选项</option>
…..
</optgroup>
<optgroup label =“组2”>
<option value=“…..”>选项</option>
<option value =“…..”>选项</option>
…..
</optgoup>
…..
</select>
多行文本域<textarea>:
<textarea name=“….” rows=“….” col=“,,” …..>
</textarea>(就是比较大，还有滚动条）
在textarea中输入的内容，就会自动显示在文本域内
<textarea>的属性： name 设置文本区的名称 placeholder 描述文本区域内预期值的简短提示 rows 设置文本区内的可见行数 cols 设置文本区内可见宽度`
表单属性：
语法：
<form action=“” method=“” name=“”…..>
表单元素
</form>
<form>标签：
- action ，URL 提交表格时向何处发送表单数据
- method get,post 设置表单以何种方式发送到指定页面
- name form_name 表单的名称
- target _blank,_self,_parent,_top 在何处打开action URL
- enctype application/plain….. 在发送表单数据以前如何对其进行编码
post和get的区别：
GET：使用url传递参数
对全部信息的数量也有限
通常用于信息的获取
POST：表单数据做为对于http请求体的一部分
对所发送信息的数量无限制
通常用于修改服务器上的资源
<div>和<span>
<div>是一个容器标记，能够包含段落，表格，图片等各类html元素
<span>没有任何意义，为了应用样式
html标签
块级标签：相似div，占据一行，换行
行内标签：相似span，在一行不换行
标签嵌套：
块级元素（占据一行，换行）： `<div>,<ul>,<ol>,<li>,<dl>,<dt>,<dd> <h1>~<h6>,<p>,<form>,<hr>…..` 行内标签（在一行，不换行）： `<b>,<em>,<img>,<input>,<a>,<sup>,<sub>,<textarea>,<span>`
块级元素能够包含行内元素和某些块级元素
div基本上能够包含所有块级元素
行内元素不能包含块级元素，只能包含行内
特殊块级元素只能包含行内元素，不能包含块级元素：
如：h1~h6,p,dt
块级元素和块级元素并列是对的
行内元素和行内元素并列是对的
e.g.
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<title>html案例</title>
</head>
<body>
<div>
<div><img src=“img/logo.jpg”/></div>
<div>
<ul>
<li><a herf=“http://www.immoc.com”>HTML5</li>
<li><a herf=“http://www.immoc.com”>JAVASCRIPT</li>
<li><a herf=“http://www.immoc.com”>CSS</li>
<li><a herf=“http://www.immoc.com”>PHP</li>
<li><a herf=“http://www.immoc.com”>IOS</li>
<li><a herf=“http://www.immoc.com”>ANDROID</li>
<li><a herf=“http://www.immoc.com”>PHOTOSHOP</li>
</div>
<div><imp src=“img/banner.jpg”/></div>
</div>
<div><h1>如何成为优秀的工程师<h1></div>
<div><h6>2天前  308浏览nbsp; 308;1.评论<h6></div>
<p>
复制内容
</p>
<ol>
<li></li>
<li></li>
</ol>
<h6>做者<h6>
<div>
<dl>
<dt>HTML标记语言<dt>
<dd><img src=“img”/></dd>
<dd></dd>
</dl>
<dl>
<dt>CSS层叠样式表</dt>
<dd><img src=“img/css3.jpg”/></dd>
<dd></dd>
</dl>
<dl>
<dt>什么是javascript<dt>
<dd><img src=“img/js.jpg”/></dd>]
<dd></dd>
</dl>
</div>
<div><p>只学有用的</p></div>
</body>
</html>
- 1. 所有总结
- 2. 剑指offer所有的题目总结
- 3. Android所有动画分类总结
- 4. Fatfs文件系所有函数总结
- 5. HTML总结
- 6. HTML的总结
- 7. HTML DOM总结
- 8. html总结
- 9. HTML总结篇
- 10. 【HTML】总结
- 更多相关文章...
- • Rust 所有权 - RUST 教程
- • Docker 资源汇总 - Docker教程
- • 算法总结-双指针
- • 算法总结-回溯法
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 所有总结
- 2. 剑指offer所有的题目总结
- 3. Android所有动画分类总结
- 4. Fatfs文件系所有函数总结
- 5. HTML总结
- 6. HTML的总结
- 7. HTML DOM总结
- 8. html总结
- 9. HTML总结篇
- 10. 【HTML】总结