HTML基础整理

Web概述

1 浏览器内核

  • JS引擎
  • 渲染引擎
    • Trident（IE内核）；EdgeHTML（Edge内核）
    • Gecko（Firefox内核）
    • webkit（Safari内核）
    • Blink（Chrome内核）

2 Web标准

  • 结构标准：用于对网页元素进行整理和分类，主要包括XML和XHTML两部分，即.html。
  • 样式标准：用于设置网页元素的外观样式，主要指CSS，即.css。
  • 行为标准：指网页模型的定义及交互的编写，主要包括DOM和ECMAScrpit两部分，即.js。

HTML

1 HTML基本格式

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
</body>
</html>

2 WebStorm常用快捷键

<!--
>：下一个子标签
*：多少个标签
$：标签的名称序号
{}:标签的内容
[]:标签的引用属性
-->

<!--输入：h1,按tab键-->
<h1></h1>
 
<!--输入：div#abc,按Tab键-->
<div id="abc"></div>
 
<!--输入：div.abc,按Tab键-->
<div class="abc"></div>

<!--输入  ul>li*5>a[href=#]{我是第$个} 再按tab键-->
<ul>
    <li><a href="#">我是第1个</a></li>
    <li><a href="#">我是第2个</a></li>
    <li><a href="#">我是第3个</a></li>
    <li><a href="#">我是第4个</a></li>
    <li><a href="#">我是第5个</a></li>
</ul>
 
<!--输入 li*3>div.img>img[src='images/$.jpg'] 再按tab键-->
<li>
    <div class="img"><img src="images/1.jpg" alt=""></div>
</li>
<li>
    <div class="img"><img src="images/2.jpg" alt=""></div>
</li>
<li>
    <div class="img"><img src="images/3.jpg" alt=""></div>
</li>

<!--快速生成for循环-->
<script>
        /* for循环：输入itar,再点击tab键*/
        for (var i = 0; i < array.length; i++) {
            var obj = array[i]; 
        }
</script>


<!--div#tab1+div#tab2-->
 
<div id="tab1"></div>
<div id="tab2"></div>

<!--引入  link   加tab键-->
    <link rel="stylesheet" href="">
 
    <!--引入css   link:css   加tab键 -->
    <link rel="stylesheet" href="css/mycss.css">
 
    <!--引入js    script:src  加tab键-->
    <script src=""></script> 
 
    <!--html中插入js   script  加tab键-->
    <script></script>

<!--input:button 加tab键-->
<input type="button" value="">

<!--form:get-->
<form action="" method="get"></form>
<!--form:post-->
<form action="" method="post"></form>

3 HTML常用标签

<hr/>水平分割线标签
<br/>换行标签，只显示一行
<p></p>段落标签
<strong></strong>加粗标签
<em></em>斜体标签
&nbsp;特殊符号标签
<img src="path" alt="text" title="text" width="x" height="y">
图片路径 图片丢失提醒信息 鼠标悬停显示信息 宽度 高度
<a href="path" target="目标窗口位置"></a>
target常用属性：_blank:在新标签中打开 _self:在当前页面打开
<!--锚链接-->
<a name="top"></a>
...
<a href="#TOP">BACK TO TOP</a>
设置a标签name属性，通过href指定跳转
<!--列表-->
<ul><li></li></ul>无序列表
<ol><li></li></ol>有序列表
<dl>自定义列表
  <dt></dt>列表名称
  <dd></dd>列表内容
</dl>
<!--表格-->
<table border="1px">
    <tr><!--行-->
        <td colspan="4">1-1</td><!--列 colspan跨列-->
    </tr>
    <tr>
        <td rowspan="2">2-1</td><!--列 rowspan跨行-->
        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
    </tr>
    <tr>
        <td>3-2</td>
        <td>3-3</td>
        <td>3-4</td>
    </tr>
</table>  
<!--音视频 controls：加载控件显示视频 autoplay：自动播放 -->
<video src="path" controls autoplay></video>
<audio src="" controls autoplay></audio>
<!--iframe内联框架-->
<iframe src="" name="flag" frameborder="0"></iframe>
引用页面地址 框架标志名 边界属性
<a href="path" target="flag"></a>
<!--表单
action:表单提交的位置，可以是网站，也可以是一个请求处理地址
method:包含get和post两种方式，前者高效但不安全，后者使用场景更多
-->
<form action="path" method="get/post">
		<!--文本输入框 input
		type:通过type属性自动适应方式，可取text表示文本输入，password表示密码输入，submit表示提交，reset表示重置
		value:表示元素默认显示的初始值，type为选择框时(radio/checkbox)必须为其指定初始值
		checked:当type为radio或checkbox时，表示是否默认选中
		name:表示组，也表示该标签的属性，在选择框时需要将name属性值置为相同
		初级验证:placeholder-默认填充信息;required-非空判断;pattern-正则表达式
		-->
  	<input type="text" value="values" checked></input>
			<input tpye="radio" value="male" name="gender"/>男
			<input tpye="radio" value="female" name="gender"/>女
			<input type="file"  name="files"/>
			<input type="button" value="上传文件" name="upload">
</form>
<!--下拉列表框-->
<select name="">
  <option value=""></option>
</select>
<!--文本域-->
<textarea name="" id="" cols="30" rows="10"></textarea>

4 网页基本页面结构分析

元素名 描述
header 标记头部区域的内容
footer 标记脚步区域的内容
section Web页面中的一块独立区域
artical 独立的文章内容
aside 相关内容或应用（常用于侧边栏）
nav 导航类辅助内容
posted @ 2020-08-06 17:34  予耄逊于荒  阅读(121)  评论(0)    收藏  举报