以web标准为开头为了更好的去理解整个前端开发的体系结构,web标准是由3层组成的分别为:结构,表现,行为。
结构:用于对网页元素进行整理和分类,也就是这篇博客要说的HTML
表现:用于设置页面元素的版式。后续会写的css篇章
行为:对网页元素行为交互的编写。后续后写JAVASCRIPT相关的
说标签之前,先聊聊标签的语义化这个问题把,每个标签都有自己的意思那么语义化是什么呢,他不是说标签代表什么意思,而是我们写html页面的时候要遵循语义化的方式去写,那么语义化写页面的好处有哪些。
1.方便代码的阅读和维护
2.同时让浏览器或网络爬虫可以很好的解析,从而更好分析其中的内容
3.使用语义化标签会具有更好地搜索引擎优化
接下来开始介绍一些常用的标签,这里面讲的是HTML的有关H5的标签等整理完基础的HTML相关的CSS,JAVASCRIPT再去整理H5的。
<!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
**/
/**
3.1 文字以粗体方式显示 常用strong因为具有语音强烈
3.2 文字倾斜 常用em因为具有语音强烈
3.3 文字删除线 常用del因为具有语音强烈
3.4 文字下滑线 常用ins因为具有语音强烈
**/
/**
属性 属性值 描述
src url 图片路径 -- 必不可少
alt 文本 图像不能显示时的替换文本
title 文本 鼠标悬停时显示的内容
width 像素 设置图像的宽度
height 像素 设置图像的高度
border 数字 设置图像边框宽度
**/
/**
**/
<-- -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<base target="_blank">
<!-- base设置整体链接的打开方式 -->
<title>Document</title>
</head>
<!-- pre按照文档格式写的 认识标签和空格 -->
<pre>
hahahaha
111111
2222
333
</pre>
/**
1.表格是用来展示数据用的
语法:
姓名
电话
电话
Bill Gates
555 77 854
555 77 855
定义表格
定义表格标题
定义表格的表头
定义表格的行
定义表格单元
定义表格的页眉
定义表格的主题
定义表格个的页脚
定义用于表格列的属性
定义表格列的组
属性:border 设置表格的边框默认为0
cellspacing 设置单元格与单元格边框之间的空白间距
cellpadding 设置单元格内容与单元格边框之间的空白间距
width 设置表格的宽度
height 设置表格的高度
align 设置表格在网页中的时评对其方式
**/
- 列表标签
/**
1. 有序列表 里面只能包含li 有顺序 使用的比较少
2. 无序列表 里面只能包含Li. 没有顺序,在布局中最常用的列表
3. 自定义列表 里面有两个兄弟 dt和dd 用于单层级关系
**/
- 表单标签
/**
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.面试常见问题
- 标签上title属性与alt属性的区别是什么?
title 鼠标放在图片上的文字提示
alt 当图片资源加载不到时显示的文字名称
- 分别写出以下几个HTML标签:文字加粗、下标、居中、字体
加粗:<b>、<strong>
下标:<sub>
居中:<center>
字体:<font>、<basefont>
-
请说说你对标签语义化的理解?
1.方便代码的阅读和维护
2.同时让浏览器或网络爬虫可以很好的解析,从而更好分析其中的内容
3.使用语义化标签会具有更好地搜索引擎优化
讲真的问这种问题,属实一般就是问小白。太LOW。
-
Doctype作用? Doctype文档类型?
作用:标识版本号
标签可声明三种 DTD 类型,分别表示严格版本、过渡版本以及基于框架的 HTML 文档。
HTML 4.01 规定了三种文档类型:Strict、Transitional 以及 Frameset。
XHTML 1.0 规定了三种 XML 文档类型:Strict、Transitional 以及 Frameset。
Standards (标准)模式(也就是严格呈现模式)用于呈现遵循最新标准的网页,
Quirks(包容)模式(也就是松散呈现模式或者兼容模式)用于呈现为传统浏览器而设计的网页。
-
HTML与XHTML——二者有什么区别
a. XHTML 元素必须被正确地嵌套。
b. XHTML 元素必须被关闭。
c. 标签名必须用小写字母。
d. XHTML 文档必须拥有根元素。
-
iframe的优缺点?
优点:a. 解决加载缓慢的第三方内容如图标和广告等的加载问题
b. iframe无刷新文件上传
c. iframe跨域通信
缺点:a. iframe会阻塞主页面的Onload事件
b. 无法被一些搜索引擎索引到
c. 页面会增加服务器的http请求
d. 会产生很多页面,不容易管理。
-
简述一下src与href的区别
浏览器会识别href引用的文档并行下载该文档,并且不会停止对当前文档的处理
当浏览器解析到src引用时,会暂停浏览器的渲染,直到该资源加载完毕。这也是将js脚本放在底部而不是头部的原因。
-
介绍一下你对浏览器内核的理解?
Trident( MSHTML ):IE MaxThon TT The World 360 搜狗浏览器
Geckos:Netscape6及以上版本 FireFox Mozilla Suite/SeaMonkey
Presto:Opera7及以上(Opera内核原为:Presto,现为:Blink)
Webkit:Safari Chrome
你可能感兴趣的:(html)