学习笔记——HTML

本文详细介绍HTML的基本概念与常用标签,包括文档结构、文本格式化、列表、链接、图像及表单等内容,帮助初学者快速掌握HTML核心知识。

      学习Spring Boot难免要接触thymeleaf,而使用thymeleaf的语法则一定要有html的知识,之前我半懂半不懂的使用thymeleaf,弄到对学习的前端程序代码不明不白,所以我们要对html基础知识有个大概了解。

 

      我学习html+css是在慕课网上的,慕课有一个html+css基础入门课程十分适合新手,它是直接敲代码,所以对代码认识更为清晰,大家也可以进去学习。而这次我就在该慕课教程中总结一下html知识点,以便我们在学习thymeleaf时更加轻松。

 

(1)HTML,CSS,JavaScript

学习web前端开发基础技术需要掌握:HTML、CSS、JavaScript语言。下面我们就来了解下这三门技术都是用来实现什么的:

1. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字、图片、视频等。

2. CSS样式是表现。就像网页的外衣。比如,标题字体、颜色变化,或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

3. JavaScript是用来实现网页上的特效效果。如:鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻(新闻图片)的轮换。可以这么理解,有动画的,有交互的一般都是用JavaScript来实现的。

 

 

(2)html文件结构

html文件的结构:一个HTML文件是有自己固定的结构的。

1. <html></html>称为根标签,所有的网页标签都在<html></html>中。

2. <head> 标签用于定义文档的头部,它是所有头部元素的容器。头部元素有<title><script>、 <style><link>、 <meta>等标签,头部标签在下一小节中会有详细介绍。

3. 在<body></body>标签之间的内容是网页的主要内容,如<h1><p><a><img>等网页内容标签,在这里的标签中的内容会在浏览器中显示出来。

 

 

(3)head标签

<head>

<!--在<title>和</title>标签之间的文字内容是网页的标题信息,它会出现在浏览器的标题栏中-->
    <title>...</title>

<!--描述html文档元数据,比如定义关键词用于搜索引擎搜索,定义web页面描述,定义页面作者,定义每30秒刷一次页面>
    <meta>
     
<!--链接到外部样式文件(css,js等文件)-->
    <link>

<!--定义 HTML 文档的样式信息。在 <style> 元素中,您可以规定在浏览器中如何呈现 HTML 文档-->
    <style>...</style>

<!--用于定义客户端脚本,比如 JavaScript-->
    <script>...</script>

</head>

 

 

(4)部分标签汇总(主要是body内的标签)

  1. <body>内容</body>:body标签定义文档的主体,页面要显示中所有内容放在body标签内。

  2. <p>段落文本</p>:定义段落的标签,<p>元素会自动在其前后创建一些空白。

  3. <hx>标题文本</hx>(x可取1,2,3,4,5,6):使用<hx>标签来制作文章的标题。标题标签一共有6个,h1、h2、h3、h4、h5、h6。

  4. <strong>需要强调的文本</strong>:加粗字体

  5. <em>需要强调的文本</em>:使用斜体

  6. <span>文本</span>:标签是没有语义的,它的作用就是为了设置单独的样式用的,即可使用css修改文本模样

  7. <q>引用文本</q>:用于引用别人的话,实际上用于添加双引号

  8. <blockquote>引用文本</blockquote>:用于引用长文本,实现效果为居中缩进

  9. <br />或<br>:回车

  10. &nbsp; :添加空格,记住不要遗漏“;”

  11. <hr />或<hr>:添加横线,区分上下文

  12. <address>联系地址信息</address>:添加地址信息,也可以定义一个电子邮件地址、签名或者文档的作者身份。实现效果为斜体

  13. <code>代码语言</code>:添加一小段代码

  14. <pre>语言代码段</pre>:添加一大段代码,但是回车需要输入<br>签,空格需要输入&nbsp;

 

 

(5)列表标签

  1. 语法:

    <ul>
      <li>信息</li>
      <li>信息</li>
       ......
    </ul>

    举例:

    <ul>
      <li>精彩少年</li>
      <li>美丽突然出现</li>
      <li>触动心灵的旋律</li>
    </ul>

    ul-li在网页中显示的默认样式一般为:每项li前都自带一个圆点,如下图所示:

  2. 语法:

    <ol>
       <li>信息</li>
       <li>信息</li>
       ......
    </ol>

    举例:

    下面是一个热点课程下载排行榜:

    <ol>
       <li>前端开发面试心法 </li>
       <li>零基础学习html</li>
       <li>JavaScript全攻略</li>
    </ol>

    <ol>在网页中显示的默认样式一般为:每项<li>前都自带一个序号,序号默认从1开始,如下图所示:

  3. <div>…</div>:确定逻辑部分。常用于定义 HTML 文档中的一个分隔区块或者一个区域部分(用于组合块级元素),以便通过 CSS 来对这些元素进行格式化(常与css一起使用)。

  4. <div  id="版块名称">…</div>:使用<div>划分出一个个独立的逻辑部分。为了使逻辑更加清晰,我们可以为这一个独立的逻辑部分设置一个名称

  5. 创建表格元素:table、tbody、tr、th、td

    (1)<table>…</table>:整个表格以<table>标记开始、</table>标记结束。

    (2)<tbody>…</tbody>:如果不加<thead><tbody><tfooter> , table表格加载完后才显示。加上这些表格结构, tbody包含行的内容下载完优先显示,不必等待表格结束后在显示,同时如果表格很长,用tbody分段,可以一部分一部分地显示。(通俗理解table 可以按结构一块块的显示,不在等整个表格加载完后显示。)

    (3)<tr>…</tr>:表格的一行,所以有几对tr 表格就有几行。

    (4)<td>…</td>:表格的一个单元格,一行中包含几对<td>...</td>,说明一行中就有几列。

    (5)<th>…</th>:表格的头部的一个单元格,表格表头。

    (6)表格中列的个数,取决于一行中数据单元格的个数。

    例子: 

    <table summary="">
      <tr>
        <th>班级</th>
        <th>学生数</th>
        <th>平均成绩</th>
      </tr>
      <tr>
        <td>一班</td>
        <td>30</td>
        <td>89</td>
      </tr>
      <tr>
        <td>二班</td>
        <td>35</td>
        <td>85</td>
      </tr>
      <tr>
        <td>三班</td>
        <td>32</td>
        <td>80</td>
      </tr>
    </table>

    结果图:

  6. 添加表格样式:

    <style type="text/css">
       table tr td,th{border:1px solid #000;}
    </style>

    结果窗口显示出结果样式:

  7. <!--添加摘要-->
    <table summary="表格简介文本">
        <!--添加标题-->
        <caption>标题文本</caption>
        <tr>
            <td>…</td>
            <td>…</td>
            …
        </tr>
    </table>

     

 

(6)链接标签

  1. <a  href="目标网址"  title="鼠标滑过显示的文本">链接显示的文本</a>:定义超链接,用于从一个页面链接到另一个页面,其中href 属性指定链接的目标,title属性的作用,鼠标滑过链接文字时会显示这个属性的文本内容。

  2. <a href="目标网址" target="_blank">链接显示的文本</a>:链接的网页默认是在当前浏览器窗口中打开,而如果需要在新的浏览器窗口中打开,则使用 target="_blank"

  3. <a>标签还有一个作用是可以链接email地址,使用mailto能让访问者便捷向网站管理者发送电子邮件。我们还可以利用mailto做许多其它事情。下面一一进行讲解,请看详细图示:

    注意:如果mailto后面同时有多个参数的话,第一个参数必须以“?”开头,后面的参数每一个都以“&”分隔。

    下面是一个完整的实例:

    在浏览器中显示的链接:发送

    点击“发送”链接会打开电子邮件应用,并自动填写收件人等设置好的信息,如下图:

  4. <img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">:插入图片

        (1)src:标识图像的位置;

        (2)alt:指定图像的描述性文本,当图像不可见时(下载不成功时),可看到该属性指定的文本;

        (3)title:提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本);

        (4)图像可以是GIF,PNG,JPEG格式的图像文件。

 

 

(7)表单标签

  1. <form  method="传送方式"  action="服务器文件"> HTML 表单</form>:

    (1)<form> :<form>标签是成对出现的,以<form>开始,以</form>结束。

    (2)action :浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。

    (3)method : 数据传送的方式(get/post)。

    (4)所有表单控件(文本框、文本域、按钮、单选框、复选框等)都必须放在 <form></form> 标签之间(否则用户输入的信息可提交不到服务器上哦!)。

  2. <form>
       <input type="text/password" name="名称" value="文本" />
    </form>

    (1)type:

       当type="text"时,输入框为文本输入框;

       当type="password"时, 输入框为密码输入框。

    (2)name:为文本框命名,以备后台程序ASP 、PHP使用。

    (3)value:为文本输入框设置默认值。(一般起到提示作用)

    举例

    <form>
      姓名:
      <input type="text" name="myName">
      <br/>
      密码:
      <input type="password" name="pass">
    </form>

    在浏览器中显示的结果:

  3. <textarea rows="行数" cols="列数">文本</textarea>:文本域

    (1)<textarea>标签是成对出现的,以<textarea>开始,以</textarea>结束。

    (2)cols :多行输入域的列数。

    (3)rows :多行输入域的行数。

    (4)在<textarea></textarea>标签之间可以输入默认值。

    举例

    <form  method="post" action="save.php">
    
            <label>联系我们</label>
    
            <textarea cols="50" rows="10" >在这里输入内容...</textarea>
    
    </form>

    在浏览器中显示结果:

  4. <input type="radio/checkbox" value="值"  name="名称" checked="checked"/>:单选框和复选框

    (1)type:

       当 type="radio" 时,控件为单选框

       当 type="checkbox" 时,控件为复选框

    (2)value:提交数据到服务器的值(后台程序PHP使用)

    (3)name:为控件命名,以备后台程序 ASP、PHP 使用

    (4)checked:当设置 checked="checked" 时,该选项被默认选中

    如下面代码:

    注意:代码中的<label>标签在本章 5-9 中有讲解。

    在浏览器中显示的结果:

  5. <option value ="提交值" selected="selected">:下拉列表框

    如下代码:

    在浏览器中显示的结果:

  6. <select multiple="multiple">:复选框

    如下代码:

    在浏览器中显示的结果:

  7. <input type="submit" value="提交">:提交按钮

    举例

    在浏览器中显示的结果:

  8. <input type="reset" value="重置">:重置按钮

    举例

    在浏览器中显示的结果:

  9. <label for="控件id名称">:

    它为 input 元素定义标注。label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。

 

 

 

(8)部分css知识

(1)id选择器和类(class)选择器的区别:

相同点:可以应用于任何元素
不同点:

1、ID选择器只能在文档中使用一次。与类选择器不同,在一个HTML文档中,ID选择器只能使用一次,而且仅一次。而类选择器可以使用多次。

下面代码是正确的:

<p>
  三年级时,我还是一个<span class="stress">胆小如鼠</span>的小女孩,上课从来不敢回答老师提出的问 
  题,生怕回答错了老师会批评我。就一直没有这个<span class="stress">勇气</span>来回答老师提出的问 
  题。
</p>

而下面代码是错误的:

 <p>
    三年级时,我还是一个<span id="stress">胆小如鼠</span>的小女孩,上课从来不敢回答老师提出的问 
    题,生怕回答错了老师会批评我。就一直没有这个<span id="stress">勇气</span>来回答老师提出的问 
    题。
</p>

2、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式,但只可以用类选择器的方法实现,ID选择器是不可以的(不能使用 ID 词列表)。

下面的代码是正确的(完整代码见右侧代码编辑器)

.stress{
    color:red;
}
.bigsize{
    font-size:25px;
}
<p>
  到了<span class="stress bigsize">三年级</span>下学期时,我们班上了一节公开课...
</p>

上面代码的作用是为“三年级”三个文字设置文本颜色为红色并且字号为25px。

下面的代码是不正确的(完整代码见右侧代码编辑器)

#stressid{
    color:red;
}
#bigsizeid{
    font-size:25px;
}
<p>
    到了<span id="stressid bigsizeid">三年级</span>下学期时,我们班上了一节公开课...
</p>

上面代码不可以实现为“三年级”三个文字设置文本颜色为红色并且字号为25px的作用。

 

 

补充:

(1)value属性:

value 属性为 input 元素规定值。

对于不同类型的 input 元素,value 属性的用法也不同:

  • 对于 "button", "reset", "submit" 类型 - 定义按钮上的文本
  • 对于 "text", "password", "hidden" 类型 - 定义输入字段的初始(默认)值
  • 对于 "checkbox", "radio", "image" 类型 - 定义与 input 元素相关的值。该值会发送到表单的 action URL。

注释:value 属性对于 <input type="checkbox"> 和 <input type="radio"> 是必需的。

注释:value 属性不适用于 <input type="file">。

 

(2)class属性:

class 属性定义了元素的类名。

class 属性通常用于指向样式表的类。但是,它也可以用于 JavaScript 中(通过 HTML DOM), 来修改 HTML 元素的类名。

其中:在 HTML 4.01 中, class 属性不能用于: <base>, <head>, <html>, <meta>, <param>, <script>, <style>, 和 <title>。

 

(3)href属性和src属性:

href属性是使用在<a>标签里面,用于指定超链接目标的 URL。

src属性是使用在<img>标签里面,它的值是图像文件的 URL,也就是引用该图像的文件的的绝对路径或相对路径。

 

(4)name属性:

name 属性规定 input 元素的名称。

name 属性用于对提交到服务器后的表单数据进行标识,或者在客户端通过 JavaScript 引用表单数据。

注释:只有设置了 name 属性的表单元素才能在提交表单时传递它们的值

 

(5)<form>标签内的action:

必需的 action 属性规定当提交表单时,向何处发送表单数据。

语法:<form action="value">

属性值:

描述
URL

向何处发送表单数据。

可能的值:

  • 绝对 URL - 指向其他站点(比如 src="www.example.com/example.htm")
  • 相对 URL - 指向站点内的文件(比如 src="example.htm")

 

(6)button,input和a标签作为按钮时区别:

    buttoninputa标签都可以加上一定的样式之后成为外观上没有太大差别的按钮,那么,这三个标签都适合在什么场景下作为按钮使用呢?

  1. <button>提交</button>: 
    通过onclick绑定javascript事件。

  2. <input type="submit" value="提交" />: 
    将表单内用户设置或选择的所有数据一并提交到后台。

  3. <a class="btn" href="#">提交</a>: 
    通过添加链接访问到页面中的某一个位置或另一个页面,不向后台提交数据。

 

(7)value和text的区别:

      value 是标签的默认值 ,text是标签的属性类型 。text 是用于显示的,而 value 是传给后续表单处理的。text是指显示在控件上的值。value是指控件某项的值。比如:单选、复选框。

 

(8)<input>中的checked属性:

定义和用法:checked 属性设置或返回 checkbox 是否应被选中。

      1.checked 属性规定在页面加载时应该被预先选定的 input 元素。

      2.checked 属性 与 <input type="checkbox"> 或 <input type="radio"> 配合使用。

      3.checked 属性也可以在页面加载后,通过 JavaScript 代码进行设置。

 

 

注:本文所有内容均来自慕课网中课程\前端开发\HTML/CSS\HTML+CSS课程。如需转载,请标明出处

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值