前端基础知识概览(html)

不止秋风
140 阅读8分钟

前端基础知识概览

前端组成

前端主要由三个部分组成：

  • HTML（展示内容）
  • CSS（排版写样式）
  • JavaScript（页面特效，表单验证）

前端编译器

前端使用浏览器作为编译器，不同浏览器内核不同导致同一个页面在不同浏览器显示效果不同而产生兼容性问题。

前端开发工具

常用的前端开发工具有记事本、NodePad++、HBuilder、Eclipse、visual studio code 、dreamwaver、IDEA等。

HTML

HTML是超文本标记语言，由一系列标签组成，每个标签都有特定含义。

XHTML规范

  • 每个XHTML页面都有一对根标签<html></html>组成。

  • XHTML的标签不区分大小写，但是W3C提倡小写。

  • XHTML的标签必须要关闭，可以是单标签或双标签。（单双标签都要关闭）

    • <div> </div> 和 <br/>

  • XHTML中属性名要小写，属性值要加引号。

  • XHTML中所有标签可以嵌套。

    • <div> <span> </span> </div>

XHTML组成

文档声明 + HTML基本结构

XHTML的文档类型声明

告诉浏览器如何解析当前网页，有严格型、过渡型和框架集型文档类型声明。

XHTML 与 HTML 的关系

XHTML可以看作是HTML的一种更严格、更规范化的版本，它基于XML（可扩展标记语言）规范，强调文档的结构和语法正确性。

基于关系:

  • XHTML是HTML的一种延伸和发展，是在HTML基础上进行扩展和规范化得来的。
  • XHTML是HTML在XML规范下的应用。

语法要求:

  • XHTML对文档的语法要求更为严格，要求标签必须正确嵌套和闭合，属性必须使用引号包围。
  • HTML在标签嵌套和属性使用上相对宽松，允许一些不规范的写法。

文档结构:

  • XHTML更注重文档结构和语义，强制要求使用正确的标签和属性，以确保文档的层次结构和含义清晰明确。
  • HTML在文档结构上也有规范，但相对于XHTML来说不太严格。

大小写敏感:

  • XHTML是大小写敏感的，标签和属性名称必须小写。
  • HTML对大小写不敏感，标签和属性名称可以混合大小写。

文档类型声明:

  • 在XHTML中，文档类型声明通常以开头，紧接着是文档类型的定义。
  • 在HTML中，文档类型声明也存在，但通常使用更简单的形式，如。

元素和属性:

XHTML引入了一些新的元素和属性，以支持更严格的文档结构和语义，例如来指定字符集。

浏览器兼容性:

由于XHTML对语法要求更严格，它在一些老旧的浏览器中可能无法正确解析，导致兼容性问题。 HTML在这方面相对宽松，更适用于各种浏览器。

严格型文档类型声明:

<!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.0 Transitional//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">

HTML基本结构

<html>
    <head>
        <title>标题</title>
    </head>
    <body>
    </body>
</html>

HTML注释

用于给代码写解释说明。

HTML中头部常用标签

标题标签：<title>标题</title>
设置页面编码：<meta http-equiv="charset" Content="utf-8"/>
设置内容类型和编码：<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
设置搜索关键字：<meta name="keyWords" content="关键字内容"/>
设置网页描述：<meta name="description" content="描述内容"/>
几秒跳转到其他网站：<meta http-equiv="refresh" content="5;url=页面地址"/>

HTML中body常用标签

块级标签：独占一行，如标题标签、段落标签、块级标签、水平线标签等。
有序列表：<ol>，使用<li>定义列表项。

无序列表：<ul>，使用<li>定义列表项。
自定义列表：<dl>，使用<dt>定义项目，使用<dd>定义描述。
表格：使用<table>定义表格，使用<tr>定义行，使用<td>定义单元格。

有序标签


	<!--有序列表-->
 <ol>
           <li>肤白</li>
           <li>貌美
                   <!--嵌套有序列表-->
                   <ol>
                           <li>黑长直</li>
                           <li>标配</li>
                   </ol>
           </li>
           <li>大长腿</li>
           <li>多财多亿</li>
           <li>大波浪</li>
           <li>36D</li>
   </ol>

无序标签

			<!--无序列表-->
    <ul type="circle">
            <li>月薪过万</li>
            <li>双休</li>
            <li>朝9晚6</li>
            <li>健身房</li>
    </ul>

自定义列表

<!--自定义列表-->
  <dl>
          <dt>java</dt>
          <dd>java是一种面向对象的语言</dd>
          <dd>java是一种跨平台语言</dd>
          <dd>java是一种强类型的编译解释型语言</dd>
  </dl>

表格

技巧：如果要做跨行跨列的表格，先按最细的行和列来做，然后从上往下观察跨行和跨列。 如果跨列，将当前对应列用跨列属性，然后删除当前行后面多余的列。 如果跨行，将当前对应列用跨行属性，然后删除下面行与当前列对应多余的列。 跨列：左右合并。 跨行：上下合并。 注意：正常表格，一个单元格不可以既跨行又跨列。 跨列：colspan="跨的列数" 跨行：rowspan="跨的行数"

姓名年龄性别
张三23男
李四99女

普通表格

<!--表格-->
   <table border="1">
           <!--行-->
           <tr>
                   <!--列-->
                   <td>姓名</td>
                   <td>年龄</td>
                   <td>性别</td>
           </tr>
           
           <!--行-->
           <tr>
                   <!--列-->
                   <td>张三</td>
                   <td>23</td>
                   <td>男</td>
           </tr>
           
           <!--行-->
           <tr>
                   <!--列-->
                   <td>李四</td>
                   <td>99</td>
                   <td>女</td>
           </tr>
   </table>

表格的应用

<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title>表格的应用1</title>
        </head>
        <body>
                <!--表格-->
                <table border="1" width="500" height="500">
                        <!--行-->
                        <tr>
                                <!--列-->
                                <td></td>
                                <td colspan="2"></td>
                                
                                <td></td>
                                <td></td>
                        </tr>
                        
                        <!--行-->
                        <tr>
                                <!--列-->
                                <td rowspan="2"></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                        </tr>
                        
                        <!--行-->
                        <tr>
                                <!--列-->
                                
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                        </tr>
                        
                        <!--行-->
                        <tr>
                                <!--列-->
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                        </tr>
                        
                        <!--行-->
                        <tr>
                                <!--列-->
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                        </tr>
                </table>
        </body>
</html>

(扩展,了解)功能性表格

<!--功能性表格-->
   <table border="1" width="500" height="500">
           <!--表的标题-->
           <caption>宿舍水电统计表</caption>
           
           <!--表头-->
           <thead>
                   <!--行-->
                   <tr>
                           <!--列-->
                           <th>宿舍号</th>
                           <th>水费</th>
                           <th>电费</th>
                   </tr>
           </thead>
           
           <!--表体-->
           <tbody>
                   <!--行-->
                   <tr>
                           <!--列-->
                           <td>101</td>
                           <td>30</td>
                           <td>500</td>
                   </tr>
                   <!--行-->
                   <tr>
                           <!--列-->
                           <td>102</td>
                           <td>30</td>
                           <td>500</td>
                   </tr>
                   <!--行-->
                   <tr>
                           <!--列-->
                           <td>103</td>
                           <td>30</td>
                           <td>500</td>
                   </tr>
           </tbody>
           
           <!--表尾-->
           <tfoot>
                   <!--行-->
                   <tr>
                           <!--列-->
                           <th>合计</th>
                           <th>90</th>
                           <th>150</th>
                   </tr>
           </tfoot>
   </table>

表单(整个表单是块级标签,表单中元素是行级标签)


<!--method设置表单提交方式get/post，action设置表单提交地址，enctype设置表单提交内容编码-->
<form method="get" action="index.html" enctype="application/x-www-form-urlencoded">
    用户名：<input type="text" name="uname" value="sx" readonly="readonly" /><br />
    密码框：<input type="password" name="upwd" value="" placeholder="请输入密码" /><br />
    性别：<input type="radio" name="sex" value="man" checked="checked" />男
    <input type="radio" name="sex" value="woman" />女<br />
    爱好：<input type="checkbox" name="hobby" value="football" />足球
    <input type="checkbox" name="hobby" value="sing" checked="checked" />唱歌
    <input type="checkbox" name="hobby" value="daning" />跳舞
    <input type="checkbox" name="hobby" value="rap" />rap
    <input type="checkbox" name="hobby" value="basketball" />篮球<br />
    年龄：<input type="number" name="age" value="" /><br />
    出生日期：<input type="date" name="birthday" value="" /><br />
    邮箱：<input type="email" name="uemail" value="" /><br />
    隐藏域：<input type="hidden" name="id" value="1" /><br />
    所在城市：<select name="city">
        <option value="beijing">北京</option>
        <option value="shanghai">上海</option>
        <option value="shengzhen" selected="selected">深圳</option>
        <option value="guangzhou">广州</option>
        <option value="jiangxi">江西</option>
        <option value="hunan">湖南</option>
    </select><br />
    头像：<input type="file" name="myfile" /><br />
    协议：<textarea rows="6" cols="20">请阅读以下协议:
feifdffiefaidfiefiefieifeffiefiefiafdkfifefefek我中国人
    </textarea><br />
    <input type="button" value="普通按纽" />
    <input type="submit" value="提交" disabled="disabled" />
    <input type="image" src="img/btnLogin.jpg" />
    <input type="reset" value="重置" />
</form>

容器标签：div

是一个常用的容器标签，用于将内容组织在一个独立的块中。 

<html>
	<head>
		<title><title/>
		<style>
			#div {
				color:red;
			}
		 <style>
	<head/>
	
	<body>
		<div id = "div">
		hello world !!! 
		</div>
	</body>
</html>

范围标签：

标签用于对文本中的一部分进行样式或脚本处理。

<html>
	<head>
		<title><title/>
		<style>
			span {
				color:red;
			}
		 <style>
	<head/>
	
	<body>
		<div id = "div">
		hello <span>world</span> !!! 
		</div>
	</body>
</html>

行级标签：内容有多大占多大的位置

HTML中的行级标签指的是内容的大小仅占据其实际需要的空间。

换行标签：<br/>

换行标签用于在文本中插入换行，它不需要闭合标签，直接使用即可。

图片标签：<img>

使用图片标签可以在页面中插入图片。

<img src="图片相对路径" alt="图片加载失败的提示文字" title="鼠标悬停提示文字"/>

超链接

超链接用于在页面中创建链接，分为页面间链接和锚链接。

页面间链接

<a href="跳转相对地址">链接内容</a>

锚链接

页面内锚链接:从A页面的A位置跳转到A页面B位置

<!-- 在目标位置作个标记 -->
<a name="标记名">A页面B位置</a>
<!-- 在跳转位置写跳转链接 -->
<a href="#标记名">A页面的A位置</a>

页面间锚链接

从A页面的A位置跳转到B页面B位置

<!-- 在目标位置作个标记 -->
<a name="标记名">B页面B位置</a>
<!-- 在跳转位置写跳转链接 -->
<a href="B页面相对地址#标记名">A页面的A位置</a>

功能性链接

<a href="mailTo:2958534395@qq.com">联系我们</a>

特殊符号

特殊符号可以在HTML中使用，如小于号&lt;、大于号&gt;等。

框架集 frameset

在页面中使用框架集可以实现快速布局，但灵活性较差，加载速度较慢。


<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title>框架集的使用</title>
        </head>
        <!--框架集-->
        <frameset rows="20%,60%,*">
                <!--上面-->
                <frame src="index.html" />
                <!--中间-->
                <!--框架集-->
                <frameset cols="15%,70%,*">
                        <!--左边-->
                        <frame src="index.html" />
                        <!--中边-->
                        <frame src="index.html" />
                        <!--右边-->
                        <frame src="index.html" />
                </frameset>	
                <!--下面-->
                <frame src="index.html" />
        </frameset>
</html>

内联框架

内联框架可以实现页面的复用，灵活性较高。

    <!--内联框架-->
  <iframe src="test1.html" width="100%" frameborder="0">

	</iframe>

特殊符号

  • &lt;：小于号
  • &gt;：大于号
  • &amp;：与字符
  • &quot;：引号
  • &reg;：已注册
  • &copy;：版权
  • &trade;：商标
  • &nbsp;：空格
<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title>特殊符号</title>
        </head>
        <body>
                <h1>html在线考试</h1>
                <ol>
                        <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;HTML中,换行使用的标签是().
                                <ul style="list-style:none ;">
                                        <!--特殊符号-->
                                        <li>A.&lt;br/&gt;</li>
                                        <li>B.&lt;p&gt;</li>
                                        <li>C.&lt;hr/&gt;</li>
                                        <li>D.&lt;img/&gt;</li>
                                </ul>
                        </li>
                        <li>HTML中,换行使用的标签是().
                                <ul style="list-style:none ;">
                                        <li>A.&lt;br/&gt;</li>
                                        <li>B.&lt;p&gt;</li>
                                        <li>C.&lt;hr/&gt;</li>
                                        <li>D.&lt;img/&gt;</li>
                                </ul>
                        </li>
                        <li>HTML中,换行使用的标签是().
                                <ul style="list-style:none ;">
                                        <li>A.&lt;br/&gt;</li>
                                        <li>B.&lt;p&gt;</li>
                                        <li>C.&lt;hr/&gt;</li>
                                        <li>D.&lt;img/&gt;</li>
                                </ul>
                        </li>
                </ol>
                <div>Copyright &copy; 2004 - 2023 京东JD.com 版权所有</div>
        </body>
</html>

总结

1.前端页面组成,编译器,开发工具.

1、前端页面通常由HTML、CSS和JavaScript组成，分别负责结构、样式和交互。
2、常用的开发工具包括代码编辑器（如Visual Studio Code）、浏览器开发者工具等

2.html历史及语言

1、HTML（超文本标记语言）是一种用于创建网页结构的标记语言。
2、发展历史：HTML4、XHTML、HTML5等不同版本。

3.html结构

1、HTML文档由标签组成，标签用于描述文档的结构和内容。
2、典型HTML文档包括<html>, <head>, <title>, 和<body>等标签。

4. 6种常用头部标签

1、<meta>: 设置元数据，如字符集、视口设置等。
2、<title>: 定义网页标题，显示在浏览器标签上。
3、<link>: 引入外部资源，如CSS样式表。
4、<script>: 引入JavaScript代码。
5、<style>: 内部定义CSS样式。
6、<base>: 设置基准URL。

5.5种常用body中标签.

1、<h1> to <h6>: 定义标题。
2、<p>: 定义段落。
3、<a>: 创建超链接。
4、<img>: 插入图片。
5、<ul>和<ol>: 创建无序列表和有序列表。
6、<li>: 定义列表项。

6.有序列表

<ol> 
	<li> </li>
</ol>

7.无序列表

<ul> 
	<li> </li>
</ul>

8.自定义列表

dl>
   <dt></dt>
   <dd></dd>
   <dd></dd>
 </dl>

9.表格

<table border="1">
       <tr>
               <td></td>
               <td></td>
               <td></td>
       </tr>
       <tr>
               <td></td>
               <td></td>
               <td></td>
       </tr>
  </table>

10.扩展功能性表格

1、使用<caption>标签定义表格标题。
2、使用<thead>, <tbody>, <tfoot>标签划分表格的头部、主体和尾部部分。

11.超链接

1、页面间链接: [链接内容](跳转相对地址)
2、锚链接:
	2.1、页面内锚链接: <a name="标记名">目标位置</a> 和 [跳转位置](#标记名)
	2.2、页面间锚链接: <a name="标记名">目标位置</a> 和 [跳转位置](B页面相对地址#标记名)
3、功能性链接: [联系我们](mailto:2958534395@qq.com)

12.表单及表单元素

1、使用<form>标签创建表单。
2、常见表单元素包括文本框、密码框、单选框、复选框、下拉列表框、文件域等。
3、使用不同的<input>标签的type属性来定义不同类型的表单元素。

参考文档：

具体参考文档

座右铭

万丈高楼平地起，多点技术，多粒米。

联系方式

感谢您阅读我的博客！如果您对其中的内容有任何疑问、想法或意见，欢迎在评论区留言或通过上述联系方式与我交流。

avatar
文章
阅读
粉丝