前端基础（一）：HTML

<html>：html的根标签，网页中的所有内容都要写根元素里边

<title>：在<head>里，title中的内容会显示在浏览器的标题栏，搜索引擎会主要根据title中的内容来判断网页的主要内容

<head>：网页的头部，head中的内容不会在网页中直接出现，主要用来帮助浏览器或搜索引擎来解析网页

<body>：html的子元素，表示网页的主体，网页中的所有内容都应该写在body里。

举例：

<! doctype html>
<html>
        <head>
                <meta >
                <title></title>
        </head>
        <body>
                <h1></h1>
        </body>
</html>

5.3.4 语义标签

标题标签： h1,h2...h6

标题分组： hgroup

段落标签：p

换行标签：<br>

（1）HTML标签常见属性：

id属性：

作为标签的唯一标识，在同一个网页中不能出现相同的id属性值。

class属性：

用来对标签分组，拥有相同class属性的标签我们认为是一组，可以出现相同的class属性，也可以为一个元素指定多个class。

title属性：

用来指定标签的标题，指定title后，属性移到元素上方时，会出现提示文字。

（2）注释：

（3）html实体

格式：&名称;

功能：类似转义

常见：

空格 

小于号<

大于号>

版权©

5.3.5 行内元素/块元素

块元素：用来布局，如div

行内元素：用来包裹文字，如em

注意：

块元素内放行内元素

P标签中不能放块元素

浏览器可自动识别并解析优化html的一些结构问题

5.3.6 布局标签

结构化语义标签，即：页面上的各个布局块

header：网页头部

main：主体，通常只有一个

footer：底部

nav：导航栏

aside：侧边栏

article：表示一个独立的文章

section：独立区块，其他标签实现不了时，用这个

div：无语义，块元素

span：无语义，行内元素

5.3.7 列表

列表可嵌套

（1）有序列表：<ol></ol>

<ol>
        <li>Coffee</li>

        <li>tea</li>

        <li>milk</li>
</ol>

（2）无序列表：<ul></ul>

<ul>
        <li>Coffee</li>
        <li>tea</li>
        <li>milk</li>
</ul>

（3）定义列表：<dl></dl>

<dl>
        <dt>Coffee</dt>
                <dd>hot Black </dd>
        <dt>milk</dt>
                <dd>cold white </dd>
</dl>

5.3.8 超链接标签<a></a>

（1）<a href="", target=""> </a>

href: url或跳转位置

target: 超链接打开位置

_self：当前页面

_blank：新的tab

（2）作用 : 用来跳转页面/网站，或者当前页面的其他位置，考虑相对路径和绝对路径。

（3）锚点

跳到本页某个地方（适用于内容比较多的页面）

去顶部：<a href="#">去顶部</a>

去底部：<a href="#id">去底部</a>，想去哪儿，就在那个位置设：<a id...>，通过id跳转

哪儿都不去：<a href="javascript:;">哪儿都不去</a>

5.3.9 图片标签 <img>

（1）作用：向当前页面引入一个外部图片

（2）属性：

src: 指定图片路径（本地图片，网上图片），路径规则同超链接。

alt: alt="描述文字"，图片的描述，默认情况下不做显示，当图片无法加载时显示。搜索引擎会根据alt内容来识别图片，不写alt，则不会被搜索引擎使用（浏览器通过alt属性去找图片）

width, height: 宽高属性。如width="500"（单位像素，不用写出px），只设置一个时，另一个等比例改变。

注意：

PC端一般不建议修改图片大小，需要多大图片裁剪即可。

移动端需要对图片进行缩放。

使用原则：效果一样的，用尺寸小的。效果不一样的，用效果好的。支持多种图片格式

（3）图片的格式：

jpeg, jpg, git, png, webp, base64

5.3.10 内联框架

（1）<iframe> 作用：用于在当前页面中引入一个其他页面。

（2）属性

src: 其他页面来源

width, height

frame border

注意：浏览器不会搜索内联框架里的内容，即iframe对搜索引擎没什么影响

5.3.11 表格标签<table>

（1）定义

<table></table>：表示一个表格，表格里加行列，有几个tr就是有几行

<tr></tr>：表示一行，里面加列，有几个td就表示有几列

<td></td>：表示一个单元格，有几个td就表示有几个单元格（列）

colspan="数字" rowspan="数字" 属性：表示横向合并，纵向合并

（2）延伸：长表格

作用：对于一些较长的表格，我们可以将其分为3部分，展示效果更明显，即使代码中这几部分的内容顺序颠倒，页面展示的顺序还是会按照从头部到底部

<table></table>

        头部<thead></thead>: 里面可以放多个tr

        主体<tbody></tbody>: 里面可放多个tr

        底部<tfoot></tfoot>: 里面可放多个tr

        表头字段<th></th>: 功能类似td，放在tr里

5.3.12 表单<form>

（1）作用：将本地的用户数据提交到远程的服务器中（跟服务器有交互）

（2）表单标签<form></form>

1）其余需要提交到服务器的表单内容，都在这个表单标签里。

2）form里的属性：

action属性：action="服务器"：表单需要提交的服务器地址

method属性
method="GET"：数据放在url中
method="POST"：数据放在body中
可在网页代码-network-Header-formdata里查看

3）文本

<input type=“text” name=“username” >
必须为指定一个name属性。（例子：指定name后，在网页（服务器）网址上可以看到？后有相应内容）

<input type=“text” name=“username” value=“请输入用户名”>
value值是默认值

<input type=“text” name=“username” value=“请输入用户名” readonly>
readonly表示只读，不可改

<input type=“text” name=“username” autocompplete=“off”>
autocomplete为off，表示不自动填补完要输入的内容

<input type=“text” name=“username” value=“hello” disabled>
disabled表示提交时该项不提交

<input type=“text” name=“username” autofocus>
autofocus表示自动聚焦定位

4）密码

<input type="password" name="pw">

也要设置name属性，提交信息后会把密码信息也提交上去

5）单选按钮

<input type=“radio” name=“rad” checked value=“篮球”>

也是input标签里，type="radio"

name属性: 指定最终提交给服务器的是什么项，如果没有，则没有提交内容

value：必须指定value值，作为用户填写的数据传给服务器

checked：指定默认值，即将改单选项默认选中

6）多选框

<input type=“checkbox” name=“hobby” value=“sleep” checked>

也是input标签里，type="checkbox"

属性类似单选按钮

7）下拉列表

<select></select>: 包裹下拉表的内容
                 <select name=“sel”>
                        <option value=“one”>1</option>
                          <option selected value=“two”>2</option>
                </select>

name属性可以加在select标签里，对标签里的多个option都起作用

同样的，需要有name, value. option标签之间的内容，是显示在页面下拉表中的

8）补充：几个常见按钮

<input type=“submit” value=“提交按钮”>
               value内容显示在按钮上

<button type=“submit”>提交按钮2</button>
               默认的type是submit，即写不写都可以提交

<button type=“button”>按钮</button>
               只是按钮，不能提交

<button type="reset">重置</button>
               重置按钮

出处不详，经久不息

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端基础（一）：HTML

目录1. 前端技术栈2. 分类2.1 C/S2.2 B/S3. 万维网历史4. VSCode工具5. HTML55.1 三个重点5.2 工具5.3 常用标签5.3.1 文档声明5.3.2 meta标签5.3.3 html实体5.3.4 语义标签5.3.5 行内元素/块元素5.3.6 布局标签5.3.7 列表5.3.8 超链接标签5.3.9图片标签 5.3.10 内联框架5.3.11 表格标签5.3.12 表单...
复制链接

扫一扫