HTML学习笔记

1. 标签

HTML是Hyper Text Markup Language 超文本标记语言 的缩写 

HTML是由一套标记标签 (markup tag)组成,通常就叫标签 

标签由开始标签和结束标签组成 

这是一个开始标签 

这是一个结束标签 

 Hello World 

标签之间的文本叫做内容

2. 元素

元素指的是从开始标签到结束标签之间所有的代码 

比如 

HelloWord

 

一个完整的HTML文件,应该至少包含html元素,body元素,以及里面的内容,

标题

有的特殊元素,没有内容,即开始和结束标签直接放在一起 比如br,hr

3. 属性

属性用来修饰标签的 比如要设置一个标题居中 

居中标题

写在开始标签里的 align="center" 就叫属性 

align 属性名 

center 属性值 

属性值应该使用双引号括起来

4. 注释

html使用 进行注释

注释通常用于解释一段代码的意义 ,注释不会在网页上显示出来

5. 标题

标题会自动粗体,大写其中的内容,并且带有换行效果 ,一般会使用

分别表示不同大小的标题,如:

标题1

标题2

标题3

标题4

标题5
标题6

6. 段落

标签即表示段落 是paragraph的缩写 自带换行效果。

代码体现:

段落1

7. 粗体

  都可以用来实现粗体的效果。

区别:b是bold的缩写,仅仅表示该文本是粗体的,并不暗示这段文字的重要性;strong虽然也是粗体,但是更多的是强调语义上的加重,提醒用户该文本的重要性。 在SEO(搜索引擎优化)的时候,也更加容易帮助用户找到重点的内容,推荐使用strong。

代码体现:

无粗体效果

   b标签粗体效果
     strong标签粗体效果

8. 斜体

都可以表示斜体效果

区别:

(1)i是italic的缩写,仅仅表示该文本是斜体的,并不暗示这段文字的重要性

(2)em 是 Emphasized的缩写,虽然也是斜体,但是更多的是强调语义上的加重,提醒用户该文本的重要性。 常常用于引入新的术语的时候使用。

代码体现:

无斜体效果

使用 i 标签带来的斜体效果
使用 em 标签带来的斜体效果

 

9. 预格式

有时候,需要在网页上显示代码,比如java代码,就需要用到pre标签。实例代码如下:

这里是没有用预格式的情况:

public class HelloWorld {     public static void main(String[] args) {        System.out.println("Hello World");     } }

使用预格式的情况:


public class HelloWorld {

    public static void main(String[] args) {

       System.out.println("Hello World");

    }

}

 

10. 删除效果

即删除标签 ,delete的缩写。

代码体现:

无删除效果

使用del标签实现的删除效果
使用s标签实现的删除效果,但是不建议使用,因为很多浏览器不支持s标签

 

11. 下划线

即下划线标签。

代码体现:

使用ins标签实现的下划线效果


使用u标签实现的下划线效果,但是不建议使用

 

12.  图像

即图像标签 ,需要设置其属性 src指定图像的路径

格式:

 width=“宽度” height=“高度”src= “图片路径” / alt=”提示语句”>

如果图像是本地文件,只需把图片放在同一个目录下即可 src直接使用文件名,不需要/;

如果图片在上级目录,则在src上加上 ../,即可访问上级目录的图片 ,如果是在上级目录的上级目录,则使用 ../../;

如果使用图片所在的绝对路径,并在前面加上file://

img不能够自己居中,需要放在其他能够居中的标签中实现这个效果,比如h1标签,p标签. 经常采用的手段是放在div中居中。

 

13. 超链接

标签即用来显示超链 完整元素是 :

跳转到的页面地址">超链显示文本

显示12306链接,并在新的页面中打开代码:

www.12306.com

 

14. 表格

标签用于显示一个表格 ,表示行 
表示列又叫单元格。

代码体现:



  

      

      

  



  

      

      

  



  

      

      

  
12
34
ab

水平合并:用到td属性的colspan

垂直合并:用到td属性的rowspan

 

15. 列表

列表分简单项目列表、有序列表、定义列表 
分别用

    标签、
      标签、
      标签表示

      简单项目列表:

      • llllll
      • hhhhh

      Ul中type属性值可以为:disc:实心圆心,默认值;square:方形圆心;circle:空心圆。

       

      有序列表:

      • llllll
      • hhhhhh

      Ul中type属性值可以为:1:数字,默认值;A/a:大写/小写字母;I/i:大写/小写罗马数字

      定义列表:

          
            
      项目1:
            
      内容1
            
      项目2:
            
      内容2
         

       

      16. 块div span

       这两种标签都是布局用的, 这种标签本身没有任何显示效果 ,通常是用来结合css进行页面布局。

       

      17. 字体

      使用标签表示字体,font常用的属性有 color和size, 分别表示颜色和大小,在html中,颜色通常使用两种方式来表示:

      (1) 颜色名,比如red, blue
      (2)颜色对应的16进制,比如#ff0000 就表示红色

      绿色默认大小字体
      
      
      蓝色大2号字体
      红色小2号字体

       

      18. 内联框架

       

      19.  文本框

      即表示文本框 ,并且只能够输入一行。

      
      
      
      
      

       

       

      20. 密码框

      即表示密码框

      
      
      

      21. 表单

      用于向服务器提交数据,比如账号密码

      
      
         
      
          账号:
      
          
          密码:    
         

       

      22. 单选框

      表示单选框

      默认选中,设置属性checked:

      单选1

      分组:多个单选框,都在一个分组里,同一时间,只能选中一个单选框 ,设置name属性相同即可:

      学习java
      
      学习web
      
      

      23. 复选框

      即表示复选框

      今天要做什么呢

      学习java    
      学习web

       

      24. 下拉列表

                              

       

      25. 文本域

       

      26. 普通按钮

      即普通按钮,不具备提交form的效果

      27.  提交按钮

      即为提交按钮,用于提交form,把数据提交到服务端

      28. 重置按钮

      重置按钮 可以把输入框的改动复原

      29.  图像提交

      即使用图像作为按钮进行form的提交

      30.  按钮

      即按钮标签 ,与不同的是,

      你可能感兴趣的:(HTML)