HTML总结重点与常见面试题
流走的年华 -1.什么是HTML?
HTML是一种超文本标记语言,而不是编程语言
2.什么是CSS?css是层叠样式表,用于修饰文档的语言,可以将文档以更优雅的形式呈现给用户
3.HTML和CSS、JavaScript的关系html和css、js为网页三要素
html:网页框架的构建 结构
css:样式的设置 页面
js:事件、动态、 行为 相应用户的操作
4.在VSCode软件下的快捷键:注释:ctrl+/
换行:ctrl+enter
生成文档结构:shift+!回车即可
直接写HTML:5回车即可
(1)<!DOCTYPE html>
html5标准网页声明,不加这一行的话,就表示页面采用浏览器本身的解析标准,这样会造成页面在不同的浏览器可能会出现不同的显示效果。h5的文档声明,声明当前的网页是按照html5标准编写的编写的。如果不写文档声明,则会导致有些浏览器会进入一个怪异模式,进入怪异模式后,浏览器解析页面会导致页面无法正常显示,所以为了避免进入该模式,一定要写文档声明。
(2)<html lang="en">
a.html是根标签,一个页面中有且只有一个根标签,网页中的所有内容都应该写在html根标签中
b.属性lang是language的缩写,意思是语言,en代表的是英语,zh—CN代表中文
c.html根标签中只有两个子标签,head:浏览器的设置,body:可视区展示
(3)<head></head>
head标签中的内容不会直接在网页中显示,是用来帮助浏览器解析页面的
(4)<meta charset="UTF-8">
a.meta标签用来设置网页的一些元数据,比如网页中的字符集,关键字,简介
b.meta是一个自结束标签,编写一个自结束标签时,可以在开始标签中添加一个
c.字符编码:浏览器会根据字符编码进行解析,常见的字符编码有:gb2312、gbk、unicode、utf-8
(5)<meta name="viewport" content="width=device-width,initial-scale=1.0">
a.viewport:设备的屏幕
b.width=device-width:width属性控制屏幕设备的宽度,假如你的网站将被带有不同屏幕分辨率的设备浏览,那么将它设置为device-width可以确保它能够正确呈现在不同的设备上。
c.initial-scal=1.0:确保网页加载时,以1:1的比例呈现,不会有任何的缩放。
(6)<title></title>
浏览器选项卡上的名字
(7)<body></body>
设置网页的主体内容,网页中所有可见的内容,都应该在body中编写,在body里的内容都是显示在浏览器的视区内的。
6.实体空格:
小于号:<
大于号:>
版权:©
注册商标:®
7.块级元素(1)作用:搭建网页结构
(2)常用元素:htm、body、div、p、ht~h6、ul->li、ol->li、dl->dd/dt、header、footer、nav,artice、section、aside、adderss、
(3)特点:
a.独占一行空间
b.默认宽度为100%(如果有父元素,则相对于父元素来说,如果没有,则相对于浏览器而言)
c.高度由子元素或内容决定(撑起来)
d.可以通过css指定其宽度
e.块级元素可以嵌套块级元素和行内元素
8.行内元素(1)作用:在结构中填充网页内容
(2)常用元素:span、a、img、strong、b、i、em、sub、sup...
(3)特点:
a.与其他行内元素共享一行空间
b.高度由自身决定
c.由于不用搭建网页结构,所以也无需通过css指定其宽度
d.a标签
a:链接外部或内部网址 href="相对路径./../ /绝对路径:http://ip:端口号/项目/文件名"(https://)
经典应用:锚点 定义锚点、链接锚点
1.给一个跳转按钮,也就是触发跳转的按钮 返回顶部<a href="#">回到顶部</a>
2.要跳转到的位置:<div id="center">找到我</div>
3.<a href="#center">返回顶部</a>
target:定义点击后页面加载的位置 默认取值_self
_blank 在新窗口打开/新标签页
e.img标签
img :放图片
src 放图片地址
width 图片宽度
height 图片高度
alt 图片加载出现问题时给用户展现的内容
title 鼠标悬停时的文字提示
9.块级元素与行内的区别 面试题(80%) (1).经典:块级元素独占一行,行内元素与其他元素共享一行
(2).宽高:块级可以直接设置宽高,行内不可以直接设置宽高。
(3)img 、input 属于特殊的行内元素,也称为置换元素,img和input可以设置宽高,但是为行内元素,需要用display改变元素属性来设置
(4).块级元素可以包含块级与行内,行内只能包含行内
10.web的第一门编程语言JavaScript
11.列表元素(1)无序列表:给一堆数据添加列表语义,并且这一堆数据中所有的数据都没有先后之分
a.ul、li 相当于班级与同学的关系、城市
b.<ul type="value">
<li></li>
</ul>
c.type取值
disc 实心 默认值
circle 圆心 空心
square 实心 方块
(2)有序列表:给数据添加列表语义,并启动这一堆数据中所有的数据都有先后之分(排行榜)
a.<ol type="value">
<li></li>
</ol>
b.type取值:
数字
大写字母
小写字母
罗马字母大写
罗马字母小写
(3)定义列表:dl-dt/dd(没有那么重要)
先通过dt标签定义列表中的所有标题,然后再通过dd标签给每个标题添加描述信息
12.表格标签(1)一对table标签就是一个表格
(2)一对tr标签就是表格中的一行
(3)一对td标签就是一行中的一个单元格
(4)<table>
<tr>
<td>内容<td>
</tr>
</table>
(5)注意:
a.表格标签有一个border边框属性, 这个属性决定了边框的宽度. 默认情况下这个属性的值是0, 所以看不到边框
b.表格标签和列表标签一样, 它是一个组合标签, 所以table/tr/td要么一起出现, 要么一起不出现, 不会单个出现
c.如果给td标签设置widht/height属性, 会修改当前单元格的宽度和高度, 不会影响整个表格的宽度和高度
d.表格的宽度和高度:默认是按照内容的尺寸来调整的,手动改变table的width/height属性
e.单元格的宽高:td的width、height
(行内样式:;)
(6)表格内单元格的水平、垂直对齐
水平:align table(表格水平对齐方式)、tr(当前单元格内容的水平对齐方式)、td(当前单元格内容的水平对齐方式)
垂直:valign tr/td(当前单元格内容在垂直方向的对齐方式)
(7)表格的外边距与内边距属性
a.cellspacing外边距:单元格和单元格之间的距离 默认情况下是2px
b.cellpadding内边距:单元格的边框和文字之间的间隙(调整表格内容与边框的距离)默认情况下是1px
(8)单元格合并
a.colspan 水平方向上的单元格合并,合并列
b.rowspan 垂直方式上的单元格合并,合并行
3.form表单(1)<form action="提交的服务器接口地址">
<表单元素>
</form>
注意:表单元素一定要写在表单中
(2)基本表单元素
a.明文输入框
<input type="text" name="account" placeholder="请输入用户名">
name:表单提交时,会作为参数的名称,结合输入的值进行匹配,组成参数名=参数值的结构
placeholder:提示
b.暗文输入框 加密操作
<input type="password" name="password" placeholder="请输入密码">
c.单选框
<input type="radio" name="xx" value="xxx" checked>
互斥操作:给每一个单选框设置相同的name属性,还必须设置相同的值
checked:默认选中
d.多选框
<input type="checkbox" name="xxx" value="xxx" checked>
checked:默认选中
e.提交按钮
<input type="submit">
作用: 将表单中已经填写好的数据, 提交到远程服务器
交到服务器地址(action属性:服务器地址)
注意:若想将表单数据提交到后台,表单元素需要有name属性
f.普通按钮
<input type="button" value="xxx">
g.图片按钮
<input type="image" src="">
h.重置按钮 清空表单中已经填好的数据
<input type="reset" value="xx">
特别申明:本文内容来源网络,版权归原作者所有,如有侵权请立即与我们联系(cy198701067573@163.com),我们将及时处理。
下一篇: CSS 文本超出提示效果