页面布局第1天:HTML基础

477 阅读7分钟

相信会看到我这篇文章的你,对前端开发已经有所了解,相关的概念我就不赘述了。

准备工作

安装软件

  • visual studio code编辑器
    • 扩展插件下载(下图)
      • Chinese
      • open in browser 截屏2022-04-11 下午3.42.06.png
  • Chrome 浏览器

HTML 简介

  • 超文本标记语言(HyperText Markup Language),在浏览器上运行的一种标记语言;
  • 标记语言是一套标记标签 ,HTML 使用标记标签来描述网页 。

HTML的文件命名: 小写字母开头,后可接下划线、数字、字母,不可使用中文或特殊字符作为文件名。

创建简单站点

用来归纳一个网站上所有的网页、素材以及他们之间的联系

目录结构

|-- site文件夹
     |-- html文件夹
     |-- css文件夹
     |-- js文件夹
     |-- imgs文件夹
     |-- index.html(首页)

注意事项:首页必须命名为index.html,其他页面写在html文件夹里。

文件的命名规则

  • 必须以小写英文字母开头 (可以包括小写英文,数字、下划线)
  • 其中不得包含汉字、空格和特殊字符

HTML 基本结构

快速生成html基本结构快捷键: html:5+tab键。生成后如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    这里写页面代码
</body>
</html>

HTML 基本语法

  • HTML 标签

    1. HTML 标签是由尖括号包围的关键词,比如 <HTML>
    2. HTML 标签通常是成对出现的,比如 和 。第一个是开始标签,第二个是结束标签
    3. HTML 也存在单标签,例如
  • HTML 元素

    • 由一对双标签或者一个单标签组成
  • HTML 属性

    • 由【HTML 属性="属性值"】组成,多个属性(或属性值)之间用空格隔开。
    • HTML 属性写在标签名后面,用空格隔开。
  • HTML 注释

    • 方便理解,备注一些重要的信息。快捷键:ctrl+?
    • 格式:<!-- 这是HTML的注释,你在页面上看不到我 -->

扩展:书写 HTML 代码快捷键

  • html:5 + tab 生成页面结构
  • 标签名字+tab 生成一对标签
  • ctrl+c 复制 ctrl+x 剪切 ctrl+v 黏贴
  • ctrl+z 返回上一步 ctrl+y 返回下一步
  • ctrl+s 保存
  • ctrl+?注释

扩展:打开浏览器的控制台

  • 方式1: f12 - elements - 点击你想看的元素
  • 方式2: 找到页面的指定元素 - 右键 - 检查

HTML 常用标签

标题 h1,h2,h3,h4,h5,h6

作用:把页面上的文字加上标题的语义,其中 h1 定义标题的语义化最重;

注意:一个页面只能有一个 h1 标签。

<h1>淘宝网</h1>
<h2>主题市场</h2>
<h3>女装</h3>
<h4>羽绒服</h4>
<h5>轻羽绒服</h5>
<h6>短款轻羽绒服</h6>

段落 <p>这是段落</p>

作用:给页面的上一段文字加上段落的语义

换行 <br/>

作用:换行。

列表标签

  • 无序列表

作用:显示一列没有排列顺序的数据。

<!-- 无序列表ul(unordered list)> li列表项(list item)。-->
<ul>
    <li>本子</li>
    <li>便利贴</li>
    <li></li>
</ul>
  • 有序列表

作用:显示一段有顺序的数据。

 <!-- 有序列表ol(ordered list)> li 列表项 -->
 <ol>
     <li>小苹果</li>
     <li>最炫民族风</li>
     <li>荷塘月色</li>
 </ol>
  • 自定义列表

作用:显示一段数据,格式自己定义

 <!-- 自定义列表dl(definition list)> dt 自定义列表项 + dd 对自定义列表项的描述-->
 <dl>
     <dt>做饭食材</dt>
     <dd>白菜</dd>
     <dd>南瓜</dd>
     <dd>猪肉</dd>
     
     <dt>生活用品</dt>
     <dd>牙签</dd>
     <dd>牙膏</dd>
     <dd>牙刷</dd>
 </dl>

注意: ul、ol 标签是用来管理 li 标签,所以 ul、ol 中只能出现 li。(同理:dl 只能有 dt、dd)

图片 <img/>

作用:在页面显示一张图片。

 <!-- 属性: -->
 <!-- [src] : 引入图片的路径 (../ 返回上一级目录)-->
 <!-- [alt] : 图片无法正常显示时,出现的文字 -->
 <!-- [title] : 鼠标悬停在图片上,出现的文字 -->

<img src="images/6.jpg" alt="我要装逼了,快醒醒" />
<img src="7.jpg" title="熊本熊表情包"/>

锚链接 <a></a>

作用:跳转页面。

属性属性值
hrefa 标签的跳转目标地址
target设置连接的跳转方式:_blank:保留原始页面,再进行跳转_self:在当前页面进行跳转

补充:为页面上所有 a 标签设置跳转方式(一般放在 titile 标签下面)

扩展

  1. 可以在当前页面进行定位

    • 在页面的指定位置加入一个任意标签,给这个标签设置一个id名;
    • 设置a标签的href属性为“#id名”。
  2. 在跳转的页面进行定位

表格

早期网站开发中,人们喜欢作用表格布局,使用非常的泛滥。到了 2008 年之后,人们意识到表格的局限性,所以改为用 div+css 模式。【2002.Sina.com.cn、2004.sina.com.cn】

作用:用来将数据以表格形式显示出来。

标签定义
table定义表格
caption定义表格标题
thead定义表格的页眉
tbody定义表格的主体
tfoot定义表格的页脚
tr定义表格的行
th定义表格列标题
td定义表格单元
<table>
    <caption>花名册</caption>
    <thead>
        <tr>
            <th>姓名</th>
            <th>爱好</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td>这是新生花名册</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>小绿</td>
            <td>睡觉</td>
        </tr>
    </tbody>
</table>
常用属性作用
border给表格加上了边框
width表格宽度
height表格高度
cellspacing单元格与单元格之间的间距
cellpadding单元格的内填充,单元格边框与内容的间隙
rowspan单元格占多行
colspan单元格占多列

表单

作用:用来收集用户的信息,将来提交到服务器。

表单相关标签及属性

标签属性属性值+作用
form 表单action提交到的后台地址
method提交的方式
name表单名字
inputtypetext文本框、password密码框、button普通按钮、reset重置按钮、radio单选框、checkbox多选框、file上传文件、submit提交按钮、image图片提交按钮
value给表单控件添加默认内容
placeholder(输入框)占位符提示
autofocus(输入框)自动聚焦
pattern(输入框)正则校验
checked(单选框、多选框)设置默认选中的值
multiple(type="file")上传多个文件
select 下拉列表name表单控件名字
option 下列列表选项value选项值
selected设置下列列表默认选中该选项
textarea 文本域name表单控件名字
cols列数
rows行数
<!-- 表单form>表单控件input+(下拉列表select>选项option[value])+文本域textarea[cols列][rows行]
form:
    [action]提交到的后台地址
    [method]提交的方式 (get、post)
    [name]表单名字
input:
    [type]表单控件的类型(text文本框、password密码框、submit提交按钮、button普通按钮、reset重置按钮、radio单选框、checkbox多选框、file上传文件)
    [name] 若该表单控件内容需要提交,则加上该属性。同一组单选框或多选框需要添加相同的名字
    [value] 给表单控件添加内容
--><form action="#" method="get" name="login">
    <input type="text" name="yonghuming" value="诸葛亮"/> <br />
    <input type="password" name="mima"/> <br />
    <input type="radio" name="menpai"/>龙宫 <input type="radio" name="menpai"/>大唐官府
    <br />
    <input type="radio" name="gender"/>男  <input type="radio" name="gender"/>女
    <br />
    <input type="checkbox" name="hobby"/>大保健  
    <input type="checkbox" name="hobby"/>睡觉  
    <input type="checkbox" name="hobby"/>学习
    <br />
    <input type="submit" value="登录"/><br />
    <input type="button" value="没用的东西"/><br />
    <input type="reset"/><br />
    <select name="city">
        <option value="广州">广州</option>
        <option value="深圳" selected>深圳</option>
        <option value="张家界">张家界</option>
    </select>
    <textarea name="Qzone" cols="15" rows="15">留下你想说的话吧!</textarea>
</form>

表单控件的共有属性

  • name 给表单控件添加名字。

    • 若该表单控件内容需要提交,则加上该属性。
    • 同一组单选框或多选框需要添加相同的name值
  • disabled 表单控件禁用

  • required 验证条件,必填项

更多表单相关标签

标签作用
fieldset表单字段集,用于对表单中的元素进行分组。[disabled]属性定义空间禁止使用
legend字段集标题。legend元素必须是fieldset内的第一个元素。
label提示信息标签。[for]属性关联表单控件的[name]属性
<form action="#">
    <fieldset>
        <legend>注册</legend>
        
        <!-- label提示信息标签 for为了谁-->
        <label for="uname">用户名</label>
        <input type="text" value="请输入用户名" id="uname"/>
        <br />
        
        爱好: 
        <label><input type="checkbox" name="hobby"/>吃零食</label>  
        <label><input type="checkbox" name="hobby"/>玩游戏</label>
    </fieldset>
</form>

视频 <video></video>

定义视频,比如电影片段或其他视频流

<video src="movie.ogg" controls="controls">
  您的浏览器不支持 video 标签。
</video>
属性描述
src要播放的视频的 URL。
autoplay如果出现该属性,则视频在就绪后马上播放。
controls如果出现该属性,则向用户显示控件,比如播放按钮。
width设置视频播放器的宽度。
height设置视频播放器的高度。
loop如果出现该属性,则当媒介文件完成播放后再次开始播放。
muted规定视频的音频输出应该被静音。
poster规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像。
preload如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用 "autoplay",则忽略该属性。

音频 <audio></audio>

www.w3school.com.cn/tags/tag_au…

块级元素<div></div>

特点:(1)宽度默认占一整行 (2)可以设置宽高

例:body、h1-h6、p、列表

行内元素<span></span>

特点:(1)宽高由内容决定(不能设置宽高) (2)一行显示多个

例:input、select、a、img