前端基础-html部分

枫枫知道
182 阅读5分钟

HTML介绍

HTML是超文本标记语言（HyperText Markup Language）

是一种用于创建网页的标准标记语言

HTML不是编程语言，而是标记语言

创建一个html

编辑器可以选择webstorm或者vscode

大部分编辑器，创建html文件都有默认填充

比如这是westorm的填充

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

如果没有生成的话，输入 ！然后按tab键 大部分编辑器也能生成HTML骨架

其中head标签被称为网页的头部，title标签是网页的标题，body是网页可见的内容部分

html是由标签组合而成的，标签分为单标签和双标签

双标签

<body></body>

单标签

<br/>

注释

浏览器中看不见的，但是能在控制台元素中看到

<!--注释-->

大部分编辑器都支持按 ctrl / 进行注释

块级标签

  • 独占一行
  • 可以设置宽度，高度，margin,padding
  • 宽度默认所在容器的宽度
标签作用
table定义表格
h1 ~ h6定义标题
hr定义一条水平线
p定义段落
li标签定义列表项目
ul定义无序列表
ol定义有序列表
div定义文档中的分区或节
form创建 HTML 表单

table标签

<table  border="1" cellpadding="0" cellspacing="0"  width="500" height="249">
    <thead >
    <tr>
        <th>序号</th>
        <th>name</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>枫枫</td>
    </tr>
    <tr>
        <td>2</td>
        <td>张三</td>
    </tr>
    </tbody>
</table>

<!--align属性名，属性值为left center right，规定表格相对周围元素的对齐方式-->
<!--border属性名，属性值1或"",规定表格是否有边框，默认为""，表示没有边框-->
<!--cellpadding属性名，属性值像素值,单元格内容和边框之间的空白，默认为1-->
<!--cellspacing属性名，属性值像素值,单元格和单元格之间的距离，默认为2-->
<!--width属性名，属性值像素值或百分比,规定表格的宽度-->
<!--height属性名，属性值像素值或百分比,规定表格的高度-->

列表标签

有缩进

有序标签可以通过type属性设置

可以选择

i A 1 a I

form标签

<form action="/xxx" method="get" name="form1">
    <input value="提交" type="submit"/>
    <input value="重置" type="reset"/>
</form>

属性：

属性描述
accept-charset规定在被提交表单中使用的字符集（默认：页面字符集）
action规定向何处提交表单的地址（URL）（提交页面）
autocomplete规定浏览器应该自动完成表单（默认：开启）
enctype规定被提交数据的编码（默认：url-encoded）
method规定在提交表单时所用的 HTTP 方法（默认：GET）
name规定识别表单的名称（对于 DOM 使用：document.forms.name）
novalidate规定浏览器不验证表单
target规定 action 属性中地址的目标（默认：_self）

表单里面一般会有一个submit的input标签，用于提交

行内标签

  • 与其他行内元素并排
  • 设置宽高无效
  • 默认的宽度就是文本内容的宽度
  • 水平方向的 padding 和 margin 属性可以使用。
  • 只能容纳文本级元素和内联元素
标签作用
a标签定义超链接
span组合文档中的行内元素
br定义换行
b定义字体缩写
label标签
表单标签input textarea select
img图片

a标签

所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。

属性：

target：

  • _blank表示在新标签页中打开目标网页
  • _self表示在当前标签页中打开目标网页

download：用于下载

input标签

type属性值表现形式对应代码
text单行输入文本<input type=text" />
password密码输入框<input type="password"  />
date日期输入框<input type="date" />
checkbox复选框<input type="checkbox" checked="checked"  />
radio单选框<input type="radio"  />
submit提交按钮<input type="submit" value="提交" />
reset重置按钮<input type="reset" value="重置"  />
button普通按钮<input type="button" value="普通按钮"  />
hidden隐藏输入框<input type="hidden"  />
file文本选择框<input type="file"  />

属性说明：

  • name：表单提交时的“键”，注意和id的区别

  • value：表单提交时对应项的值

    • type="button", "reset", "submit"时，为按钮上显示的文本内容
    • type="text","password","hidden"时，为输入框的初始值
    • type="checkbox", "radio", "file"，为输入相关联的值

  • checked：radio和checkbox默认被选中的项

  • readonly：text和password设置只读

  • disabled：禁用，所有input均适用

label标签中的for属性会和input中的id关联

<label for="user">
    用户名
</label>
<input placeholder="请输入用户名" id="user">

select标签

下拉标签

<select name="user">
    <option value="1">枫枫</option>
    <option value="2">张三</option>
    <option value="3">王五</option>
</select>

可设置 multiple 表示可多选

img标签

<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">

span和div

span是行内标签中的默认标签

div是块级标签中的默认标签

方便去通过css设置样式

相对路径和绝对路径

学习任何一门语言，只要牵扯到了读文件，都会有人搞不清楚路径这个文件

任何一门编程语言，只要牵扯到了读文件

都会有人搞不清楚路径问题

这节课一次性讲清楚，html，css，js，以及其他任何语言都是通用的

文件的相对路径和绝对路径

相对路径
<img src="./avatar.png" alt="">
<img src="avatar.png" alt="">

绝对路径
<img src="G:\IT\前端项目\qianduan_study\html\avatar.png" alt="">

web中相对路径和绝对路径

相对路径
<form action="xxx">
    <input type="submit" value="提交">
</form>

绝对路径
<form action="/xxx">
    <input type="submit" value="提交">
</form>

相对路径

http://localhost:63342/qianduan_study/html/4.%E7%9B%B8%E5%AF%B9%E8%B7%AF%E5%BE%84%E5%92%8C%E7%BB%9D%E5%AF%B9%E8%B7%AF%E5%BE%84.html
提交 地址 变成了
http://localhost:63342/qianduan_study/html/xxx?

绝对路径

http://localhost:63342/qianduan_study/html/4.%E7%9B%B8%E5%AF%B9%E8%B7%AF%E5%BE%84%E5%92%8C%E7%BB%9D%E5%AF%B9%E8%B7%AF%E5%BE%84.html
提交 地址 变成了
http://localhost:63342/xxx?
avatar
文章
阅读
粉丝