快速入门HTML

  

接待关注个人主页：逸狼

  

---

创造不易，可以点点赞吗

  

如有错误，接待指出~

  目次
  
  第一个html文件
  标签
  h1~h6
  p =>段落标签
  br => 换行标签
  img =>图片标签
  a =>超链接标签
  表格标签
  表单标签
  表单控件 
  form表单
  ⽆语义标签:div&span 
  综合训练:实现一个⽤⼾注册界⾯
  

---

  

---

HTML(Hyper Text Markup Language),超⽂本标志语⾔. 超⽂本:⽐⽂本要强⼤.通过链接和交互式⽅式来构造和出现信息的⽂本情势.不但仅有⽂本,还大概包 含图⽚,⾳频,大概⾃已经审阅过它的学者所加的评注、增补或脚注等等.
第一个html文件

打开vs code ,创建一个html文件
按"!"快捷键 快速初始化界面

• html标签是整个html⽂件的根标签(最顶层标签)
  
• head标签中写⻚⾯的属性.
  
• body标签中写的是⻚⾯上显⽰的内容
  
• title标签中写的是⻚⾯的标题. 
  

1. <head>
2.     <meta charset="UTF-8">
3.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
4.     <title>Document</title>
5. </head>
6. <body>
7.     我的第一个html文件
8. </body>
9. </html>

复制代码

在网页中使用快捷键F12 ,检察网页源代码
HTML的标签都是提前界说好的,使⽤差别的标签,表⽰差别的内容.
标签

• 标署名(body)放到<>中 
  
• ⼤部分标签成对出现.<h1>为开始标签,</h1>为竣事标签.
  
• 少数标签只有开始标签,称为"单标签".
  
• 开始标签和竣事标签之间,写的是标签的内容.
  
• 开始标签中大概会带有"属性".id属性相当于给这个标签设置了⼀个唯⼀的标识符(⾝份证号码).
  

h1~h6

h1~h6,数字越大,字体越小

1. <h1>我是⼀级标题</h1>
2. <h2>我是⼆级标题</h2>
3. <h3>我是三级标题</h3>

复制代码

颠末欣赏器剖析后效果

快速复制上一行的 快捷键: alt + shift +上键
p =>段落标签

p标签表现 段落标签.

• 没有缩进
  
• 根据欣赏器宽度来决定排版
  
• 首尾处 换行符,空格均无效
  
• 笔墨间输入多个空格或换行 相当于 一个空格
  

br => 换行标签

br是break的缩写,假如想实现换行,使用</br>,

• br是单标签(没有竣事标签)
  
• br标签不像p标签有这么大换行安定("换行"与"段落和段落间的安定")
  
• </br>是精确写法,不发起写成br(写成br也能实现效果,欣赏器有较好的"鲁棒性",主动资助补全了)
  

img =>图片标签

可以使用绝对路径 大概 相对路径,也可以是 网络路径

• width/height:控制宽度⾼度.⾼度和宽度⼀般改⼀个就⾏,别的⼀个会等⽐例缩放.否则就会图⽚失 衡.
  
• border:边框,参数是宽度的像素.但是⼀般使⽤CSS来设定.
  

a =>超链接标签

• href:必须具备,可以是网络路径,文件地点大概 #,表⽰点击后会跳转到哪个⻚⾯. 
  
• target:打开⽅式.默认是_self(表现从当前网页加载).假如是_blank则⽤新的标签⻚打开.
  
• 
  

• 外部链接:href引⽤其他⽹站的地点
  
• 内部链接:⽹站内部⻚⾯之间的链接. 写相对路径即可.
  
•  空链接:使⽤#在href中占位.
  

1.         <a href="https://www.baidu.com">百度</a>
2.         <a href="test1.html" target="_blank">test1</a>
3.         <a href="1.rar" target="_blank">下载文件</a>
4.         <a href="#" target="_blank">空链接</a>

复制代码

表格标签

• able标签:表⽰整个表格
  
• tr:表⽰表格的⼀⾏(使用tr*3,快速天生3行tr标签,别的同样可以使用这个方法)
  
• td:表⽰⼀个单位格
  
• thead:表格的头部地域
  
• tbody:表格的主体地域.
  

1.         <table>
2.             <tr>
3.                 <td>aaa</td>
4.                 <td>bbb</td>
5.             </tr>
6.             <tr>
7.                 <td>ccc</td>
8.                 <td>ddd</td>
9.             </tr>
10.             <tr>
11.                 <td>eee</td>
12.                 <td>fff</td>
13.             </tr>
14.         </table>

复制代码

运行效果是没有边框的,假如要添加边框,就要共同使用CSS 

表格标签有⼀些属性,可以⽤于设置⼤⼩边框等.但是⼀般使⽤CSS⽅式来设置.
这些属性都要放到table标签中.

• align是表格相对于四周元素的对⻬⽅式.如align="center"表现居中 (不是内部元素的对⻬⽅式)
  
• border表⽰边框. 1表⽰有边框(数字越⼤,边框越粗),""表⽰没边框.
  
• cellpadding:内容隔断边框的隔断,默认1像素
  
• cellspacing:单位格之间的隔断.默以为2像素
  
• width/height:设置尺⼨.
  

 注意,这些属性,vscode都没有提⽰

表单标签

用于让用户输入信息的告急途径,包罗下面两种

• 表单控件:输⼊框,提交按钮等.重点是input标签.
  
• 表单域:包罗表单位素的地域.重点是form标签.
  

表单控件 

各种输⼊控件,单⾏⽂本框,按钮,单选框,复选框.

• type(必须有),取值种类许多,按钮button,复选框checkbox,文本框text,文件file,图片image,暗码password,单选按钮radio等.
  
• name:给input起了个名字.尤其是对于单选按钮,具有雷同的name才气多选⼀.
  
• value:input中的默认值. checked:默认被选中.(⽤于单选按钮和多选按钮)
  

1.     日期,可以选择日期<input type="date" name="" id=""><br/>
2.     文本框<input type="text"><br/>
3.     密码<input type="password"><br/>
4.     文件<input type="file"><br/>
5.     邮箱<input type="email"><br/>
6.     单选按钮 <input type="radio" name="gender" checked="checked">男
7.     <input type="radio" name="gender">女<br/>
8.     复选框 <input type="checkbox">唱跳 <input type="checkbox">rap
9.     <input type="checkbox">篮球<br/>
10.     普通按钮 <input type="button" value="我是一个按钮,可以点击"><br/>
11.     提交按钮 <input type="submit"><br/>
12.     下拉菜单
13.     <select >
14.         <option value="">北京</option>
15.         <option value="">上海</option>
16.         <option value="">广州</option>
17.         <option value="">深圳</option>
18.     </select><br/>
19.     文本域<textarea rows="5" cols="20"></textarea>

复制代码

注意 

• 单选框之间必须具备雷同name属性,才气实现多选⼀效果.
  
• 这里的平凡按钮当前点击了没有反应.须要搭配JS使⽤
  
• 提交按钮必须放到form标签内.点击后就会实验给服务器发送哀求
  

form表单

form表单用于提交数据,要和submit共同使用
action的值 表现要提交的页面(可以是前端链接或 后端链接)

1.     <form action="test1.html" method="get">
2.         用户名: <input type="text" name="username" id=""><br/>
3.         密码: <input type="password" name="password" ><br/>
4.         <input type="submit">
5.     </form>

复制代码

⽆语义标签:div&span 

div标签,division的缩写,寄义是分割 span标签,寄义是跨度 就是两个盒⼦.⽤于⽹⻚结构

• div是独占⼀⾏的,是⼀个⼤盒⼦
  
• span不独占⼀⾏,是⼀个⼩盒⼦.
  

综合训练:实现一个⽤⼾注册界⾯

1. <h1>用户注册</h1>
2.     <table>
3.         <tr>
4.             <td>用户名</td>
5.             <td><input type="text" name="" id="" placeholder="请输入用户名"></td>
6.         </tr>
7.         <tr>
8.             <td>手机号</td>
9.             <td><input type="text" name="" id="" placeholder="请输入手机号"></td>
10.         </tr>
11.         <tr>
12.             <td>密码</td>
13.             <td><input type="password" name="" id="" placeholder="请输入密码"></td>
14.         </tr>
15.     </table>
16.     <div>
17.         <input type="button" value="注册">
18.         <span>已有账号?</span>
19.         <a href="#">登录</a>
20.     </div>

复制代码

参加div和span方便"拿取"调用选择