HTML相关知识点

HTML

  1. 前端的组成:html(内容)+css(排版和样式)+JavaScript(网页特效和表单验证)

  2. 前端编译(解析)器:浏览器(每个浏览器内核不同,所以有兼容性问题)

  3. 前端开发工具:记事本,Dreamweaver,HBuilder,WebStorm,eclipse,myeclipse,idea.

  4. h t m l : 超 文 本 标 记 语 言 . 后 缀 名 : . h t m l 或 . h t m h t m l 由 标 签 组 成 的 语 言 , 且 它 的 标 签 全 部 已 经 定 义 好 , 我 们 不 可 以 自 定 义 . \textcolor{red}{html:超文本标记语言.后缀名:.html 或 .htm html由标签组成的语言,且它的标签全部已经定义好,我们不可以自定义.} html:.:.html.htmhtml,,.

  5. x h t m l 规 范 : \textcolor{red}{xhtml规范:} xhtml:

    • 每 个 x h t m l 页 面 必 须 有 根 标 签 < h t m l > < / h t m l > \textcolor{red}{每个xhtml页面必须有根标签<html></html>} xhtml<html></html>
    • x h t m l 不 区 分 大 小 写 , 但 是 提 倡 标 签 名 和 属 性 名 小 写 . \textcolor{red}{xhtml不区分大小写,但是提倡标签名和属性名小写.} xhtml,.
    • x h t m l 必 须 正 确 嵌 套 . e g : < 标 签 名 1 > < 标 签 名 2 > < / 标 签 名 2 > < / 标 签 名 1 > \textcolor{red}{xhtml必须正确嵌套.eg:<标签名1><标签名2></标签名2></标签名1>} xhtml.eg:<1><2></2></1>
    • x h t m l 元 素 必 须 被 关 闭 。 \textcolor{red}{xhtml元素必须被关闭。} xhtml
    • x h m t l 元 素 标 签 的 属 性 值 必 须 用 引 号 . \textcolor{red}{xhmtl元素标签的属性值必须用引号.} xhmtl.
    • 标 签 名 不 能 自 定 义 , 已 经 规 定 了 每 个 标 签 的 含 义 \textcolor{red}{标签名不能自定义,已经规定了每个标签的含义} ,
  6. x h t m l 组 成 : 文 档 声 明 + h t m l 的 基 本 结 构 组 成 \textcolor{red}{xhtml组成:文档声明+html的基本结构组成} xhtml:+html

  7. xhtml的三种文档声明:

    • 严格型文档声明:

      <!DOCTYPE html  PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
      
      
    • 过渡型文档声明:

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      
      
    • 框架型文档声明:

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
      
  8. h t m l 基 本 结 构 : \textcolor{red}{html基本结构:} html:

    <html>
    		<head>
    		</head>
    		<body>
    		</body>
    	</html>
    
  9. html中头部常用标签:

    • 页 面 标 题 标 签 : \textcolor{red}{页面标题标签:} :

      <title>标题内容</title>
      
    • 页 面 内 容 类 型 和 编 码 方 式 \textcolor{red}{页面内容类型和编码方式}

      <meta http-equiv="contentType" content="text/html;charset=gb2312"/>
      
    • 搜索关键字

      <meta name="keyword" content="关键字"/>
      
    • 网站描述

      <meta name="description" content="描述内容"/>
      
    • 几 秒 跳 转 到 网 页 \textcolor{red}{几秒跳转到网页}

      <meta http-equiv="refresh" content="时间;url=页面网址"/>
      
  10. h t m l 中 b o d y 常 用 标 签 : \textcolor{red}{html中body常用标签:} htmlbody:

    1. 块级标签:独占一行.

    2. 内容标题标签:h1~h6

    3. 段落标签:

    4. 水平线标签:


    5. 列表

      • 有序列表

        <ol type="I">
        	<li>王者荣耀</li>
        	<li>英雄联盟</li>
        	<li>超级玛丽</li>
        	<li>消消乐</li>
        </ol>
        
      • 无 序 列 表 \textcolor{red}{无序列表}

        <ul type="square">
        	<li>肠粉</li>
        	<li>油条豆浆</li>
        	<li>蒸米粉</li>
        </ul>
        
      • 自 定 义 列 表 \textcolor{red}{自定义列表}

        <dl>
        	<dt>java</dt>
        	<dd>java是一种强类型的语言</dd>
        	<dd>java是一种高级语言</dd>
        	<dd>java是一种面向对象的跨平台语言</dd>
        </dl>
        
  11. 表 格 标 签 : 跨 行 r o w s p a n = " 行 数 " c o l s p a n = " 列 数 " \textcolor{red}{表格标签:跨行rowspan="行数" colspan="列数"} :rowspan=""colspan=""

    <table border="1px" width="300px" height="400px">
    		<!--行-->
    		<tr>
    			<!--列-->
    			<td>姓名</td>
    			<td>年龄</td>
    			<td>专业</td>
    		</tr>
    		<tr>
    			<!--跨列-->
    			<td colspan="2">张三</td>
    			
    			<td>软件专业</td>
    		</tr>
    		<tr>
    			<!--列-->
    			<td rowspan="2">李四</td>
    			<td>24</td>
    			<td>软件专业</td>
    		</tr>
    		<tr>
    			<!--列-->
    				
    			<td>24</td>
    			<td>软件专业</td>
    		</tr>
    </table>
    
    • ​ (了解)功能性表格

      <table border="1px" width="400px" height="500px">
      		<!--标题-->
      		<caption>年终水电报表</caption>
      			
      		<!--表头-->
      		<thead>
      			<!--行-->
      			<tr>
      				<!--列-->
      				<th>宿舍号</th>
      				<th>水费</th>
      				<th>电费</th>
      			</tr>
      		</thead>
      			
      		<!--表的主体-->
      		<tbody>
      			<!--行-->
      			<tr>
      				<!--列-->
      				<td>101</td>
      				<td>100</td>
      				<td>500</td>
      			</tr>
      			<!--行-->
      			<tr>
      				<!--列-->
      				<td>102</td>
      				<td>200</td>
      				<td>600</td>
      			</tr>
      			<!--行-->
      			<tr>
      				<!--列-->
      				<td>103</td>
      				<td>100</td>
      				<td>400</td>
      			</tr>
      		</tbody>
      		
      		<!--表尾-->
      		<tfoot>
      			<!--行-->
      			<tr>
      				<!--列-->
      				<th>总计</th>
      				<th>400</th>
      				<th>1500</th>
      			</tr>
      		</tfoot>
      </table>
      
  12. 行 级 标 签 ( 内 联 标 签 ) : 内 容 有 多 大 占 多 大 位 置 . \textcolor{red}{行级标签(内联标签):内容有多大占多大位置.} ():.

    • 换行:

    • 图片标签:<img src=“相对地址” title="鼠标悬念文字"alt=“图片加载失败提示文字”/>

      块 级 元 素 和 行 级 元 素 的 区 别 : \textcolor{red}{块级元素和行级元素的区别:}

      • 块级元素独占一行
      • 块级元素可以有宽高
  13. 框架集:

    ​ 将整个页面划分多个模板,每个模板引入一个页面.页面要么不用框架集,要么全用框架集.
    ​ 优点:方便页面布局,及页面利用.
    ​ 缺点:灵活性比较差,加载速度慢.
    ​ 注意:框架集与body不共存;

    <html>
    	<head>
    		<title>框架集的使用</title>
    		<meta http-equiv="contentType" content="text/html;charset=gb2312"/>
    	</head>
    	<!--框架集-->
    	<frameset rows="20%,60%,*">
    		<!--第一部分-->
    		<frame src=""/>
    		<!--第二部分-->
    		<frameset cols="20%,60%,*">
    			<!--左边部分-->
    			<frame src=""/>
    			<!--中边部分-->
    			<frame src=""/>
    			<!--右边部分-->
    			<frame src=""/>
    		</frameset>
    		<!--第三部分-->
    		<frame src=""/>
    	</frameset>
    </html>
    
  14. 内 联 框 架 : \textcolor{red}{内联框架:} :

    内联框架:在页面中直接引入另一个页面作为当前页面的一部分.

    优点:灵活性好,实现页面利用.

    <iframe src="2.1超链接的使用.html"></iframe>
    
  15. 特殊符号

    &lt; 小于号          
    &gt; 大于号       
    &amp; 与字符        
    &quot; 引号         
    &reg; 己注册        
    &copy; 版权        
    &trade; 商标        
    &nbsp; 空格 
    
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值