web前段学习day_01:HTML（学习如何搭建页面结构和内容）：文本标签、列表标签、图片标签、超链接、表格、表单表单、分区标签、实体引用

最新推荐文章于 2024-03-29 14:19:47 发布

litter_m

最新推荐文章于 2024-03-29 14:19:47 发布

阅读量749

点赞数

文章标签： web html

本文链接：https://blog.csdn.net/litter_m/article/details/106673055

版权

学习如何构造页面结构和内容

安装HBuilderX

从doc.canglaoshi.org网站中找到常用下载->windows->HBuilder X
或从官网下载https://www.dcloud.io/hbuilderx.html
下载后解压到某个可以找得到的地方双击运行HBuilderX.exe
第一次关闭提示是否创建快捷方式点击是
Ctrl+M 显示项目管理器在左侧空白区域右键->新建->项目
在项目上右键新建目录day01

一、HTML

Hyper Text Markup Language: 超文本标记语言
超文本：不仅仅是纯文本还包括：字体效果（大小，颜色，风格等）和多媒体信息（图片、音频、视频）
标记语言：由一对尖括号组成，有单标签和双标签xxx
双标签之间的内容成为标签体,写在开始标签里面的键值对称为属性
和XML不同点： XML是可扩展标记语言，标签可以随意写没有任何规范
学习HTML主要学习的就是有哪些HTML标签以及标签和标签之间的嵌套关系

创建第一个HTML页面

页面结构：

  <!DOCTYPE html> 文档声明：告诉浏览器使用html的哪个版本的标准解析页面，此写法是告诉浏览器使用html5的标准解析页面
  <html> 根标签： 页面中级别最高的标签
  	<head> 头标签：给浏览器看的内容写在头标签里面 
  		<meta charset="utf-8"> 告诉浏览器页面内容使用的字符集是utf-8
  		<title></title>页面标题
  	</head>
  	<body> 体标签：给用户看的内容写在体标签里面
  		
  	</body>
  </html>

写完html后如何测试

在HBuilder窗口右上角点击预览第一次点击会提示是否下载点击是，如果下载失败重试几次
在HBuilder菜单栏中点击运行-》运行到浏览器-》Chrome （前提是已经安装了Chorme浏览器）
从苍老师文档服务器中找到 Chrome浏览器下载

写在body中的常见标签有哪些？

注释快捷键 Ctrl+Shift+/

1.文本相关标签

内容标题h1-h6
字体加粗，独占一行，自带上下行间距
段落标签p
独占一行，自带上下行间距
水平分割线hr
换行br 在html中回车只能识别成一个空格如果需要换行使用br标签
加粗b 斜体i 小字small
删除线s 下划线u

2.列表标签

无序列表

 <ul type="square"><!-- unordered list -->
 	<li>刘备</li><!-- list item列表项 -->
 	<li>关羽</li>
 	<li>孙尚香</li>
 	<li>诸葛亮</li>
 	<li>刘禅</li>
 </ul>

有序列表

 <ol type="1" start="10" reversed="reversed"> 
 	<li>打开冰箱门</li> 
 	<li>把大象装进去</li>
 	<li>关上冰箱门</li>
 </ol>

列表嵌套：有序和无序可以任意无限嵌套

3.图片标签img

支持的图片格式： jpg/jpeg, png, gif
src图片路径：
相对路径：访问站内资源时使用
1. 和页面同级目录：直接写图片名
2. 在页面的上级： …/图片名
3. 在页面的下级：文件夹名/图片名
  绝对路径：访问站外资源时使用，访问站外资源又称为图片盗链（好处：可以节省本站资源，坏处：有可能会找不到图片）
width/height:设置图片的宽高
两种赋值方式:1. 像素 2. 上级元素的百分比
如果只设置宽度,高度会等比例缩放
title: 鼠标在图片上悬停时显示的文本
alt: 图片不能正常显示时显示的文本

4.超链接a

href: 资源路径, 使用方式类似src,支持相对路径和绝对路径, 如果访问的资源浏览器支持浏览则直接浏览如果浏览器不支持浏览则触发下载
图片超链接: 用a标签包裹图片就是图片超链接
页面内部跳转: 在目的地标签里面添加id=“xxx”, 在点击的超链接中href="#xxx" 即可跳转到页面中id为xxx的元素位置

5.表格table

标签: table tr表示行 td表示列 th表头(加粗并且居中) caption表格标题
属性: table:border边框 cellspacing单元格间距 cellpadding单元格距内容的距离 td:colspan跨列rowspan跨行

6.表单form

作用:用于获取用户输入的信息,并且将信息提交到服务器
学习表单就是学习表单中有哪些控件

文本框

<input type="text" name="username" value="xxx" maxLength="5" readonly="readonly" placeholder="xxxx" >

密码框

  <input type="password" name="pwd" value="xxx" maxLength="5" readonly="readonly" placeholder="xxxx" >

单选

  <input id="xxx" type="radio" name="xxx" value="xx" checked="checked">
  <label for="xxx">xxxx</label>

多选

  <input id="xxx" type="checkbox" name="xxx" value="xx" checked="checked">

日期
```
  <input type="date" name="xxx">
```
文件
```
  <input type="file" name="xxxx">
```

文本域

  <textarea name="xxx" cols="20" rows="5" placeholder="xxxx"></textarea>

下拉选 city=bj

  <select name="city">
  	<option value="bj">北京</option>
  	<option>xxxx</option>
  	<option>xxxx</option>
  </select>

7.分区标签

分区标签可以理解成是一个容器,对多个有相关性的标签进行统一管理
常见的分区标签div和span
1. div:块级分区元素, 特点:独占一行
2. span:行内分区元素,特点:共占一行
如何对页面内容进行分区?
一个页面至少分为三大区: 头体脚, 每个大区内再细分n个小的区域
```
  <div>头</div>
  <div>体</div>
  <div>脚</div>
```
html5标准中新增了分区标签,作用和div是一样的主要是为了提高代码的可读性,包括: header头 footer脚 article正文 nav导航 section区域
```
  <header></header>
  <article></article>或<section></section>
  <footer></footer>
```