自己总结的知识点,不太全面,有错误的,欢迎指正!

HTML知识点总结

html  超文本标记语言(结构层)

1.文档声明

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"/>

<title></title>

</head>

<body>

<p>段落标签</p>

<img src="路径" alt="图片加载失败时的文字"/>

</body>

</html>

2.块级元素

p <br/> h1-h6 ul ol dl dt dd div <hr/>

注:dl:定义列表  至少包含一条术语或一条说明

dt:定义列表项  标明一个术语要说明的对象

dd:列表项说明

<dl>

<dt>定义列表项</dt>

<dd>列表项的说明</dd>

</dl>

ul:无序列表  (默认样式  实心小圆点)

type属性  “square”实心方形  “circle”空心圆    “none”去掉小圆点属性

  ol:有序列表 (默认样式 阿拉伯数字1,2,3......)

 

3.行内块级元素

img:(1)图片大小:<img width=“”  height=""/>

(2)图标替代文本:<img alt="图片替代的文本内容"/>

(3)图片提示:<img title="提示文本"/>

4.行内元素

b strong i em span sup sub

注:b或strong 文本加粗

  <b>:样式表现为粗体

  <strong>:主旨是强调,表现为粗体

  i:斜体  em:主旨是强调,表现为斜体

      如果只是单纯的样式表现建议使用<b>或<i>

      如果主要目的是强调,同时样式与其他元素表现出 区别的建议使用<strong>或<em>

      <sup>上标  <sub>下标

5.嵌套 

块级元素里可以嵌套任何元素

<div>

<h3></h3>

<div></div>

</div>

    块级元素里可以嵌套行内元素

<div>

<strong>fff</strong>

</div>

<p>

<b></b>

</p>

块级元素里可以嵌套行内块级元素

<div>

<img src="" alt=""/>

</div>

6.特殊的符号:

空格:

小于号:<

大于号:>

版权:©

7.超链接

<a href="" target="_top" title="你是">我</a>

<a href="2.html">点击进入2网页</a>,点击文字进入2.html

<a href="2.html"><img src="two.jpg" /></a>,点击图片进入2.html

① a:link:未访问链接 ,如 a:link {color:blue}

② a:visited:已访问链接 ,如 a:visited{color:blue}

③ a:active:激活时(链接获得焦点时)链接的颜色 ,如a:active{color:blue}

④ a:hover:鼠标移到链接上时 ,如 a:hover {color:blue}

a:active不能设置有无下划线(总是有的)

LoVe  HAte  爱恨原则

target属性  目标

target的值

1._blank  在新窗口中打开,打开了一个新的网页

2._top   

3._self

4._parent

后三种都是新窗口把原来的窗口给覆盖掉了

title 标题

鼠标到超链接上时显示的文本

用来放所有的样式的

<style>

div{

color:red;

font-size:20px;

}

a{

}

</style>

8.地图热点区域

<img src="图片路径" usemap="#id值"/>

<map id="id值" name="id值">

<area shape="值" coords="多个数值" href="路径"/>

<area shape="值" coords="多个数值" href="路径"/>

</map>

-----形状shape="值"

值:

1.圆形 circle

2.矩形 rect

3.多边形 poly

-----坐标coords="多个数值"

值:

1.三个值    圆  前两个值圆心坐标 最后一个值是圆的半径

2.四个值    矩形  前两个值 左上角的点的坐标  第三个值是矩形的宽度  第四个值是矩形的高度

3.多个值    多边形  每两个值确定一个角点的坐标

9.table

<1>table默认无边框

<2>table的属性

边框 border = "数值"

单元格之间的间距 cellspacing="数值"

内容到单元格边框的距离 cellpadding="数值"

th 默认样式 加粗 水平居中 垂直居中

td 默认样式 水平左对齐 垂直居中  style="text-align:center" align="center" 

水平对齐方式:left(左对齐)、center(居中对齐)、right(右对齐)

--------合并单元格

1.行合并  上下合并单元格  属性 rowspan="合并的行数"

2.列合并  左右合并单元格  属性 colspan="合并的列数"

10.form表单

<form action="" method=""></form>

method  提交的方法

1.get 

2.post

<form action="表单要提交的服务器的页面地址" method="get或者post">

<input type="text" name="自己起的名字" value="" />

</form>

input 属性

type值:

text  文本框

用户名:<input type="text" name="username" value="" placeholder="请输入用户名" maxlength="3"/>

password  密码框

密码:<input type="password" name="password" value="" maxlength="6"/>

3.radio      单选框    一组里的name必须是同一个值  默认被选中  给input标签加checked="checked" 或者 直接加checked

4.checkbox  复选框    默认被选中  给input标签加checked="checked" 或者 直接加checked

5.submit    提交按钮  value值记得加上

6.reset      重置按钮

7.button    一般按钮

8.hidden    隐藏域

9.file      文件上传框 

文本域(多行文本框)

<textarea cols="列数" rows="行数">

</textarea>

下拉选项框(下拉列表)

<select>

<option value="值">内容</option>

<option value="值" selected>内容</option>

....

</select>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    前端进阶之旅阅读 16,685评论 32 459
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,680评论 1 92
  • 学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_阅读 4,716评论 0 1
  • 1、窗体 1、常用属性 (1)Name属性:用来获取或设置窗体的名称,在应用程序中可通过Name属性来引用窗体。 ...
    Moment__格调阅读 10,024评论 0 11
  • 本课来自http://www.imooc.com/learn/9请不要用作商业用途。 HTML5 HTML介绍 H...
    PYLON阅读 8,566评论 0 5