html基础

从零开始的前端生活--html基础

模板

html文件都有一个固定的模板,通过vscode可以一键生成

<!DOCTYPE html>  //  这是一个声明
<html lang="en">
<head>
  <meta charset="UTF-8"> // 为了防止乱码情况,声明为utf-8
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title> // title是网页的标题名字
</head>
<body>
  // body 是用来放内容的
</body>
</html>

 

常见标签

块级元素

div

div是html当中最常见的块级元素。可以有自己的宽高,自己可以独自占一行.把它理解成一个盒子可以用来装东西。

<div>我是div</div>

运行显示为

div

h1~h6标签

h1是一号大标题,以此类推到h6为6号标题

<h1>我是1号标题</h1>
<h2>我是2号标题</h2>
<h3>我是3号标题</h3>
<h4>我是4号标题</h4>
<h5>我是5号标题</h5>
<h6>我是6号标题</h6>

当然这些都要放在body里,body是用来装内容的,效果如下

h1~h6

ul和li

ul和li通常组合用来表示列表list,虽然他们是display: list-item; 处于半块级半行内,姑且放这

他们通常是组合出现ul里面嵌套多个li,特殊情况下还有可能li里面再嵌套ul(套娃)

 <ul>
    <li>1</li>
<li>2</li>
<li>3</li>
</ul>

表现

ul-li

其他

button 按钮标签,也很常用,同样也是双标签(>)

del 删除线标签,这是通常表示某个东西被废弃使用了

form 表单标签,创建一个表单,内有action 属性,可以与后台交互

p 段落标签

table thead tbody th tr 标签 用来创建表格

<table>
   <thead>功课表</thead>
<tbody>
  <tr>
  <td>周一</td>
<td>周二</td>
<td>周三</td>
<td>周四</td>
<td>周无</td>
</tr>
<tr>
    <td>物理</td>
<td>语文</td>
<td>数学</td>
<td>化学</td>
<td>生物</td>
</tr>
</tbody>
</table>

table

这是原始表格,可以用css加以美化

行内元素

span

span 可以说是行内元素最常用标签,它也是双标签(单标签会特别提醒),可以看做一个盒子,不能设置宽高。

img

img 为单标签,语法如下

<img src="" alt = "">

src 是图片的连接地址, alt 是当图片由于某种原因显示不出来,alt里面的内容就会替代图片显示出来

input

input 是表单标签,有多种形态。

<input type="text">

可以控制type 的值,来切换input形态,可以为按钮,多选框,单选框,密码框等等

a

a 是超链接标签

<a href=""></a>

href 的值为链接网址, a还有个属性 target ,如果为blank; 表示当点击此链接时,是否新建一个页面还是在这页面,还有个text-decorection一般设置为none

结语

比较常见的就这几个,明天整理下html5新增标签

posted @ 2020-05-28 23:25  从零开始的代码生活  阅读(142)  评论(0编辑  收藏  举报