使用vscode
搭建好环境后(安装扩展HTML CSS Support和Auto Rename Tag和Live Sever)
创建一个后缀为html的文件输入英文的叹号 ! 再点击TAB键之后可以自动填充基本框架
输入标签名称,再摁TAB键,可以自动填充<>
单标签
br换行
hr水平分割线
img 图像标签
input
双标签
- <p>段落 更改文本样式 <b>字体加粗</b> <i>斜体</i> <u>下划线</u> <s>删除线</s>
- <h1>(数字越小标题越大,最小为6级)
- <ol>有序列表 <ul>无序列表 每一行用<li>
- <table>表格
- <!--注释-->
- <a>链接
- div创建块以便布局 输入 .nav或者#nav再TAB键可快速输入(其中nav是导航栏的意思,可换成cotent).对应属性是class #是id
- span(通常和css和js一块使用)方便进行修饰样式和标记
- form表单的容器(lable为form专门的对应span)
HTML属性
用于定义元素的外观和行为,以及与其他元素的关系
属性值区分大小写,属性名称不区分大小写
鼠标放在属性上时可以查看解释
a
href:超链接的网址
target:新标签页的关系(_blank打开新的标签页)
img
src:图像的文件途径和相对路径,或者文件的链接
alt:当图像无法显示时,显示的替换图像的文本
width,height:设置图像的大小
input
type:常用text用于输入文本内容。
当为“radio”时为选项。为"checkbox"时为多选(此时也要加上name属性)
当为password时不显示输入内容为小黑点显示
当为submit时将表单的数据提交到后端或者服务器的特定位置(即form属性action的值),此时有个提交的框,若想显示其他的内容添加value的属性值,即想现实的内容。
placeholder:显示输入框中的文字,当输入内容后消失
name:确定为一个属性,这样可以保证在“男,女和保密之间只能选一个”
lable
for属性一般与input的id属性相对应,id唯一。
块元素与行内元素
块:通常从新行开始,可包含其他块和行内元素。例:div,p,h1,ul,ol,li,table,form
行内:在同一行内呈现,不独占一行,不可包含块元素,但可包含其他行内元素,例:span,a,strong,em,img,br,input