Html学习笔记
1.关于网页的大体框架
2.meta标签的作用
a.设置字符集
b.设置源数据名称和源数据内容
数据名称meta name包括关键字keyboard(是用于数据搜索引擎进行关键字搜索用的),描述description(搜索后显示的网页简介内容);
数据内容meta contact
3.行内标签和块标签
块标签自成一行,网站一般通过块元素进行布局,比如<h1><p>(段落)<blockquote>(长引用)<br>(表示换行),
块元素一般什么都能放,但是p元素内不能再放块元素.(如果放了浏览器会自动更正,可以在网站使用检查-元素来查看其在内存的真正内容)
行内标签<em>(重读)<strong>(强调)<quote>(短应用),主要用于包裹文字
4.实体
在html中有时不能书写某些特殊元素,这时候需要实体来代替
如 (不换行的空格),>(大于号),<(小于号),©(版权号)
5.vscode的相关知识
a.vscode的一些快捷操作比如!+tab会自动显示网页框架,alt+回车会在不动后面内容的情况下换到下一行.
alt+shift+up是往上复制,br*2会直接出来两个换行,ctrl+/注释快捷键
.box1+.box2（兄弟元素）可以直接出来两个div
b.live server会给当前编辑内容提供一个服务器的网站,而且可以设置在自动保存后刷新
6.超链接
<a>标签用来表示超链接,它是一个行内元素,除了它自己可以放任何元素.
href+指定路径,而路径分为外部路径和内部路径,外部路径就是直接写网址,
内部路径中./表示当前文件所在目录,../表示当前文件的上一级目录,
./xxx/表示下一级目录
target属性用来表示指定连接打开位置,_self是默认值,即还是一个网页;_blank是新打开一个网页
如果href=#,表示回到当前页面的顶部/
如果是想去当前页面的不同位置,可以在标签中设置id属性(要求英文),
如果是只要创建一个空的超链接,那么设置href=javascript:;(站位符)
7.列表
a.有序列表.用ol创建,用li表示列表项;
b.无序列表,用ul创建,用li表示列表项
c.定义列表,用dl创建,dt表示内容,dd解释
列表之间可以嵌套
8.图片标签
用img来创建,img是自结束标签,也是界于块和行内的替代元素.src指定图片路径,alt则是图片描述(不显示但是被搜索引擎识别)
用width height来规定它的长宽,如果只是修改一个,另一个会等比例变化
9.图片格式
jpg色彩丰富,不支持透明,不支持动图
gif色彩少,简单透明,支持动图
png色彩丰富,复杂透明,不支持动图
webp兼具上述有点但有兼容问题
原则是在满足要求的基础上尽量选小的
10.内联框架
iframe创建,src是引入网站的路径,width和height设置大小,frameboder的0或者1显示边框
11.音视频播放
audio创建音频,分两种形式
(1)audio.. src= ... controls autoplay.../audio
(2)audio controls
source src=...
source src=...
embed ...src= ... type="audio/mp3" width...(主要考虑兼容性问题)
video创建视频,与音频形式相同
(可以复制通用代码直接放到网页里)
12.表格
使用table标签创建表格,tr表示一行,td表示一列
通过给标签设置colspan和rowspan可以分别实现行合并和列合并
长表格:通过设置table之后,其实有theade/tbody/tfoot三个结构.使用时可以自己写出来,
也可以不写,因为浏览器会自动补充
th表示头部单元格,可以使单元格内的字体加粗
-------------------------------------------------------------------------------
可以给表格设置边框和颜色等
border-spacing:指定边框间的距离
border-collapse:collapse 设置合并边框
同时需要注意table是tbody的父元素,tbody是tr的父元素
---------------------------------------------------------------------------------
垂直居中vertical-align可以设置给具有display-table cell的块元素.但不能应用text-align水平居中
同时垂直居中和水平居中都可以对td应用
13.表单
可以给表单设置disabled=true(启用)或者false(不启用)属性,则会变成不可选中状态;
在网页中提交表单,实际上是将数据传送给远程的服务器,同时上传到服务器时必须给数据设置name值
form创建表单,action设置提交数据的服务器地址
input是行内元素
设置文本框 input type=text name=xxx;
设置提交按钮 input type=submit value=xxx (指定文字) name=xxx;
设置密码框 input type=password name(与文本框的区别是用户填入数据会被隐藏)
设置单选按钮 input type=raido 设置相同name属性建立联系,通过value设置传给服务器的数值
设置多选按钮 input type=checkbox
可以设置checked设置默认选中
设置下拉列表 section+name
下设选项option+value,可同时设置默认选中checked;
name是交给服务器的数据名字,value有时是数据的值有时只是设置默认值(文本框)或者改变按钮的文字(如提交按钮);
设置普通按钮 input type=button
设置重置按钮 input type=reset
设置邮件地址文本框 input type=email
可以给文本框设置是否自动不全autocomplete= on/off;
也可以设置readonly(只读)或者disabled(禁用)来防止信息的更改
只读数据会提交,禁用不会提交
可以给文本框设置autofocus自动获取焦点,这样在打开或者刷新网站时光标会自动停留在此文本处;
浙公网安备 33010602011771号