前端三剑客之HTML

前端三剑客之HTML

  • 1. 前言
  • 2. HTML超文本标记语言
    • 2.1 背景
    • 2.2 常用编辑工具
    • 2.3 来写第一个HelloWorld吧
    • 2.4 必备标签、属性
    • 2.5 常用标签
      • 2.5.1 标题标签
      • 2.5.2 分割线、段落
      • 2.5.3 链接
      • 2.5.4 图片
      • 2.5.5 表格
      • 2.5.6 列表
      • 2.5.7 表单
      • 2.5.8 区块
      • 2.5.9 多媒体:音频、视频
    • 2.6 小结
    • 2.7 拓展与思考
  • 3. 参考教程链接

1. 前言

前端是几乎每个程序员学习过程中的必经之路。目前常见的前端技术有:
DOM:文档对象模型,定义访问和操作HTML的标准;

HTML、CSS、JAVAScript: 分别为超文本标记语言、样式、脚本语言,这3者通常被称为“前端三剑客”;

Vue: 渐进式JAVAScript框架;

Bootstrap: 基于HTML 、Css 、JAVAScript 的前端框架;

…等等等等等

本篇将基于Sharry个人学习过程中做的笔记、总结,再一次对Html、CSS和JAVAScript进行学习、记录,于个人而言,温故知新。当然也希望对读者也有多少帮助。

2. HTML超文本标记语言

2.1 背景

HTML是一种超文本标记语言,主要负责静态网页。

超文本标记语言:一种标记语言。一种数据组织方式,组织包括图片、音频等数据在内的各种数据。可以被浏览器解释、读取。

静态网页:没有数据交互的网页。

严格的定义和较全面的背景,通过百度、教科书等方式可查。这里不再赘述。

2.2 常用编辑工具

(1)Hbuilder:相对流行的前端编辑工具
链接:Hbuilder下载地址

(2)VSCode:比较全能的编辑工具,除了HTML等前端,还能通过插件的配置拥有使用JAVA、Python、C++等高级开发语言的开发能力。
链接:VSCode下载地址

(3)IDEA、Eclipse等:
这些常用IDE其实也是可以进行前端页面的编辑,还挺方便。鉴于这些IDE应该是大家常用的,此处就不提供下载链接了。

2.3 来写第一个HelloWorld吧

程序员的第一句代码都是HelloWorld,如果是初学者,就跟着来一遍吧:

    DOCTYPE html>
    
    
    <html>
    	
        <head> 
            
            <meta charset =" utf-8"/>
            
            
            <title>Hello worldtitle>
        head>
        <body>
        
            Hello world!
        body>
    html>
    

编辑完上述代码,我们不难发现,如果要让上述代码在浏览器运行,就要保证该文件的后缀为.html或.htm,即HTML文件。

2.4 必备标签、属性

一个完整的HTML文件,最好按照上面HelloWorld的例子,拥有html、head、body等标签,其中head标签里还需注意title这个唯一必须的元素。无论哪个标签,都要注意标签的成双成对。至于自闭的标签,相当于它一个标签就是一双。

其实HTML有一定的容错率,细心的同学发现,如果删去一些标签,甚至是head等标签,将该HTML文件用浏览器运行,依然能显示一些信息。只不过,这样HTML文件就不完整了,十分不建议这么做。我们还是要保证HTML的完整性,并尽量严格地按照格式撸代码。许多标签都会有一些必备的属性,因标签而异,我们需要正确填写属性,否则内容很可能显示不正确。当然,由于标签,属性众多,我们了解和学习其中常用的即可。

至于属性是什么呢,属性是位于标签内部的,分为属性名和属性值,不同的标签有不同的属性,实现不一样的效果。从下面的例子可以先看看属性的位置:

<img src="beautifulGirl.jpg" alt="No picture" width="314" height="159">


2.5 常用标签

这是本节的重点,我们学习HTML的目标就是尽可能了解HTML的常用标签,尽可能会用。
常用的标签大多作用于body内。

2.5.1 标题标签

<h1>标题标签h1>
<h2>总共有6个等级h2>
<h3>h1~h6 字体越来越小h3>
<h4>不信你试试h4>

2.5.2 分割线、段落

<h1>段落与分割线h1>
	<hr />
	<p>上面的是分割线p>
	<p>这是段落1p>
	<hr />
	<p>这是段落2p>

通过上述例子,我们可以认识到一个自闭标签:分割线hr

2.5.3 链接

链接就是可以点开,跳转至另一个网页,下面综合标题标签、分割线、段落等,举个例子:

DOCTYPE html>
    
    <html>
        <head> 
            <meta charset =" utf-8"/>
            <title>Hello worldtitle>
        head>
        <body>
           <h1>标题标签h1>
           <p>这是段落1p>
	       <hr />
	       <a href="https://www.baidu.com/" target="_blank">百度一下a>
	       <p>这是段落2p>
        body>
    html>

主要属性的简单介绍:
href属性:链接地址;
target属性:链接跳转方式:此处的blank表示在新标签页打开;

2.5.4 图片

<img src="beautifulGirl.jpg" alt="No picture" width="314" height="159">

图片标签中最重要的属性是src,指定要显示哪张图片;alt属性是当图片不能正常显示时,返回的替换文本。

2.5.5 表格

表格由table标签定义,table标签内由tr标签控制行,td标签控制列。因为描述的是一行内有多少列,所以通常由tr包裹td。表格头由th标签描述,如果要严格一些,就需要分清表格头和列。但实际的使用体验中,th其实和td效果差不多,同志们视情况使用即可。

<table border="9">

  <tr>
  
    <th>这是一个表格头th>
    <th>一个表格头最好对应一列th>
  tr>
  <tr>
    <td>这是一列td>
    <td>这是另一列td>
  tr>
  <tr>
    <td>第二行的第一列td>
    <td>第二行另一列td>
    
  tr>
 
table>

2.5.6 列表

既然有表格,当然就会有列表。理论上,只取表格的一列,也是一个列表,仅用表格标签当然可以做出一个列表。但这里介绍的是专门制作列表的标签。所描述的列表分为有序列表和无序列表。所谓有序列表就是有序号的列表,无序列表就是没有序号的列表。

<ul>
  <li>ul标签表示无序列表li>
  <li>列表的内容由li标签包裹li>
  <li>列表内容......li>
  <li>列表内容......li>
ul>

<ol>
  <li>ol标签表示有序列表li>
  <li>默认序号从1开始li>
  <li>第三列,看看效果li>
ol>

<ol start="5">
  <li>start属性表示从第几开始li>
  <li>运行试试!li>
  <li>改start的属性值试试!li>
ol>

2.5.7 表单

前面的表格、列表,主要描述的是提供给用户浏览的表格和列表,用户并不能直接在里面填写数据。这里介绍的表单就是提供给用户填写的表格或列表。

DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>列表、表格、表单综合title> 
head>
<body>

<from>
    <h1>注册h1>
	姓名: <input type="text" name="name" value="输入姓名"> <br>
	                           
    密码: <input type="password" name="password"> <br>
    确认密码:<input type="password" name="password">
from>

<ol>
    <p>请选择业务p>
    <from>
    <li>
       业务1<input type="checkbox" name="service">
    li>
    <li>
       业务2<input type="checkbox" name="service"/>
    li>
    from>
ol>
 
<table border="5">
	<tr>
	   <td>
		  性别:男 <input type = "radio" name = "sex"><br>
		td>
		<td><input type = "radio" name = "sex"><br>
		td>
	tr>
	
	<tr>
	   <td>
		  同意协议一<input type = "checkbox" name = "agree"><br>
		td>
		<td>
		  同意协议二<input type = "checkbox" name = "agree"><br>
		td>
	tr>
	<tr>
		<td>
	      <form name="input" action="输入页面,表单数据提交到该页面" method="get">
          输入密码点击提交 <input type="passowrd" name="password">
          <input type="submit" value="请提交">
         form>
		td>	
	tr>
table>
body>
html>

我们通过该例子来详细说明一下表单:

表单由from标签描述,input标签为输入标签。

从例子中我们不难发现:form标签有name、action、method等属性。name属性主要描述该表单的名字,action是表单的数据将要提交到的页面,method主要描述提交请求的方式:我们从基础知识可得知:http基本请求主要有get、post两种方式。

input标签的属性有很多:type属性主要描述的是输入方式,例子中的radio表示单选框、checkbox是复选框、text是文本,passowrd是密码、submit是提交按钮等等;name属性是这个imput的名字,value则提示该input的提示信息。

我们从例子中不光能学习到基本的表单标签、属性的作用,还能发现html标签里其实是可以嵌套标签,以实现不同的效果。另外,input、br等标签虽然是单个出现,但其实是省略了自闭的斜杠,其实是自闭标签。

表单标签里的其余属性以及其余属性值的作用,篇幅有限,留给读者参考其余教程拓展。

2.5.8 区块

我们在练习上面html标签的过程中,难免会发现有时各种标签揉在一起,有点小乱,不太好看,而且上面的例子运行出来都是默认显示在浏览器的最左边。那么有没有方法把内容分块,并且可以设置该块的位置呢?显然是有:div标签与span标签


<div>
div的内容独占一行,欢迎尝试
div>
<div>
下一行div
div>
<div align="center">
align属性可定义div内的内容是居中显示,还是左、右,默认最左,center居中,right是最右
div>

<span>
span标签也可以用于分块
span>
<span>
span的内容如果要换行要手动换行
span>


2.5.9 多媒体:音频、视频

这块了解一下即可。不算太常用。

<video width="宽,自己视情况定义值" height="" controls>
  <source src="" type="video/">
  
video>
<audio controls>
  <source src="" type="audio/">
audio>  

2.6 小结

HTML的标签众多,这里只介绍了最常用,适合入门或巩固的一些标签和属性。更多的标签、属性,需要使用的时候再去慢慢查询即可。到这里,大家对HTML的入门或者复习巩固就差不多了。在这之后,我们要在HTML的基础上进行CSS样式的学习。

2.7 拓展与思考

细心的同学不难发现,我们在J2EE开发过程中,常用到xml文件,且这些xml多用于配置。xml与html长得很像,名字都带ml,而且都是以一个个标签的形式组成的。那么xml与html的异同是什么呢?这个作为拓展提问,供诸位查找资料、思考。Sharry个人目前也在不断学习,查找资料,思考两者之间的关系。

3. 参考教程链接

链接:W3School
链接:菜鸟教程

当然,也参考了各种学习资料、笔记等。

下一篇再见!

你可能感兴趣的