html常用标签以及面试常见问题

1.WEB标准

以web标准为开头为了更好的去理解整个前端开发的体系结构,web标准是由3层组成的分别为:结构,表现,行为。
结构:用于对网页元素进行整理和分类,也就是这篇博客要说的HTML
表现:用于设置页面元素的版式。后续会写的css篇章
行为:对网页元素行为交互的编写。后续后写JAVASCRIPT相关的

2.常用的HTML标签

 说标签之前,先聊聊标签的语义化这个问题把,每个标签都有自己的意思那么语义化是什么呢,他不是说标签代表什么意思,而是我们写html页面的时候要遵循语义化的方式去写,那么语义化写页面的好处有哪些。
  		1.方便代码的阅读和维护
        2.同时让浏览器或网络爬虫可以很好的解析,从而更好分析其中的内容
        3.使用语义化标签会具有更好地搜索引擎优化
  接下来开始介绍一些常用的标签,这里面讲的是HTML的有关H5的标签等整理完基础的HTML相关的CSS,JAVASCRIPT再去整理H5的。
  1. 骨架标签
			<!DOCTYPE html> <!-- 标识版本号 文档类型-->
			<html lang="en">  页面中最大的标签,根标签,lang 页面语言
                <head> 注意在head标签中我们必须要设置的标签是title
                    <title>Document</title> 让页面拥有一个属于自己的网页标题	
                <meta charset="UTF-8"> harset设置字符集  GBK简体中文与繁体中文  UTF-8世界通用语言格式
                <head/>
                <body></body> 元素包含文档的所有内容,页面内容基本都是放在body里面
            </html>

2.排版标签

 /** 
     2.1  标题标签 h1-h6  一行只放一个标题
     2.2  段落标签 p
     2.3  水平标签 hr
     2.4  换行标签 br
     2.5  div标签 用来布局的,一行只能放一个div
          span标签 用来布局的  一行可以放很多个span
 **/
  1. 文本格式化标签
/** 
	3.1    文字以粗体方式显示 常用strong因为具有语音强烈
	3.2     文字倾斜 常用em因为具有语音强烈
	3.3    文字删除线 常用del因为具有语音强烈
	3.4    文字下滑线 常用ins因为具有语音强烈
                **/
  1. 图像标签
/**
	
    属性    属性值  描述
    src     url     图片路径 -- 必不可少
    alt     文本    图像不能显示时的替换文本
    title   文本    鼠标悬停时显示的内容
    width   像素    设置图像的宽度
    height  像素    设置图像的高度
    border  数字    设置图像边框宽度 
**/
  1. 链接标签
/**
	
**/
  1. 注释标签
<-- -->
  1. base标签
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <base target="_blank"> 
    <!-- base设置整体链接的打开方式 -->
    <title>Document</title>
</head>
  1. pre预格式化
<!-- pre按照文档格式写的 认识标签和空格 -->
    <pre>
        hahahaha
        111111
        2222
        333
    </pre>
  1. 表格标签
/**
            1.表格是用来展示数据用的
            语法:
                
姓名 电话 电话
Bill Gates 555 77 854 555 77 855
定义表格 定义表格的行 定义表格的页眉 定义表格的主题 定义表格个的页脚 定义用于表格列的属性 定义表格列的组 属性:border 设置表格的边框默认为0 cellspacing 设置单元格与单元格边框之间的空白间距 cellpadding 设置单元格内容与单元格边框之间的空白间距 width 设置表格的宽度 height 设置表格的高度 align 设置表格在网页中的时评对其方式 **/
  1. 列表标签
/** 
      1. 有序列表 里面只能包含li 有顺序 使用的比较少
          
2. 无序列表 里面只能包含Li. 没有顺序,在布局中最常用的列表
3. 自定义列表 里面有两个兄弟 dt和dd 用于单层级关系
**/
  1. 表单标签
 /** 
            1.input控件
                input输入的意思
                标签为单标签
                type属性设置不同的属性值用来指定不同的控件类型
                除了type属性还有别的属性
            常用属性:
                属性                属性值                      描述
                type                text                    单行文本输入框
                type                password                密码输入框
                type                radio                   单选框
                type                checkbox                复选框
                type                button                  普通按钮
                type                submit                  提交按钮
                type                reset                   重置按钮
                type                image                   图像形式的提交按钮
                type                file                    文件域
                name                由用户自定义             控件的名称
                value               由用户自定义             input控件中的默认文本值
                size                正整数                   input控件在页面中的显示宽度
                checked             checked                 定义选择控件默认被选中的项
                maxlength           正整数                   控件允许输入的最大字符数
            2.label标签
                label是为input定义标注,点击label会直接到你所标注的input上获取焦点
                
                 
            3.textarea控件文本域
                 多行文字
            4.select 下拉框  selected="selected" 定义默认选中项
                
            5.form表单域
                action = url地址
                method = 用域设置表单数据的提交方式(get/post)
                name   = 用域指定表单的名称,以区分同一个页面中的多个表单
                
**/

3.面试常见问题

  1. 标签上title属性与alt属性的区别是什么?
    title 鼠标放在图片上的文字提示
    alt 当图片资源加载不到时显示的文字名称
  2. 分别写出以下几个HTML标签:文字加粗、下标、居中、字体
		加粗:<b><strong>
		下标:<sub>
		居中:<center>
		字体:<font><basefont>
  1. 请说说你对标签语义化的理解?
    1.方便代码的阅读和维护
    2.同时让浏览器或网络爬虫可以很好的解析,从而更好分析其中的内容
    3.使用语义化标签会具有更好地搜索引擎优化
    讲真的问这种问题,属实一般就是问小白。太LOW。

  2. Doctype作用? Doctype文档类型?
    作用:标识版本号
    标签可声明三种 DTD 类型,分别表示严格版本、过渡版本以及基于框架的 HTML 文档。
    HTML 4.01 规定了三种文档类型:Strict、Transitional 以及 Frameset。
    XHTML 1.0 规定了三种 XML 文档类型:Strict、Transitional 以及 Frameset。
    Standards (标准)模式(也就是严格呈现模式)用于呈现遵循最新标准的网页,
    Quirks(包容)模式(也就是松散呈现模式或者兼容模式)用于呈现为传统浏览器而设计的网页。

  3. HTML与XHTML——二者有什么区别
    a. XHTML 元素必须被正确地嵌套。
    b. XHTML 元素必须被关闭。
    c. 标签名必须用小写字母。
    d. XHTML 文档必须拥有根元素。

  4. iframe的优缺点?
    优点:a. 解决加载缓慢的第三方内容如图标和广告等的加载问题
    b. iframe无刷新文件上传
    c. iframe跨域通信
    缺点:a. iframe会阻塞主页面的Onload事件
    b. 无法被一些搜索引擎索引到
    c. 页面会增加服务器的http请求
    d. 会产生很多页面,不容易管理。

  5. 简述一下src与href的区别
    浏览器会识别href引用的文档并行下载该文档,并且不会停止对当前文档的处理
    当浏览器解析到src引用时,会暂停浏览器的渲染,直到该资源加载完毕。这也是将js脚本放在底部而不是头部的原因。

  6. 介绍一下你对浏览器内核的理解?
    Trident( MSHTML ):IE MaxThon TT The World 360 搜狗浏览器
    Geckos:Netscape6及以上版本 FireFox Mozilla Suite/SeaMonkey
    Presto:Opera7及以上(Opera内核原为:Presto,现为:Blink)
    Webkit:Safari Chrome

你可能感兴趣的:(html)

定义表格标题
定义表格的表头
定义表格单元