HTML基础

m0_63634307

已于 2024-08-04 19:29:40 修改

阅读量758

点赞数 25

分类专栏：笔记文章标签： html 前端

于 2024-08-01 20:50:43 首次发布

本文链接：https://blog.csdn.net/m0_63634307/article/details/140803627

版权

笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、网页与网站

网页：通常是单独的一个静态页面。

网站是指特定功能的，由多个网页组成的相互关系的总称。

网站是由客户端和服务组成的，称之为B/S架构，与之对应的C/S架构，它是安装在我们电脑里的程序，例如：微信客户端，LOL，WPS等。

二、W3C标准

网页主要由三部分组成：结构（html）、表现（css）、和行为（JavaScript）。

三、标签作用

<!DOCTYPE html>：告诉浏览器这是一个网页，同时说明这是一个html文档。

html标签：Html文件（网页）的根标签。注意：其他所有标签都必须写在html标签里。

head标签：用于给网站添加一些配置信息，一般情况下，head标签内部的内容不会显示给用户看。

title标签：专门用于指定网站的标题，并且这个指定的标题将来还会作为用户保存网站的默认标题。

body标签：专门用于定义HTML文档中需要显示给用户查看的内容（文字/图片/音频/视频）。

html标签分类：

单标签<img>

双标签：<html></html> <head></head> <title></title>

html标签关系分类：包含（嵌套关系）<head><title></title></head>

四、标签

(一)单标签

1.注释标签：<!-内容-->

2.换行标签：<br/>

3.水平线标签：<hr/>

(二)双标签

2.1文本标签

1.段落标签：<p>文本内容</p>

2.标题标签：h1-h6 <h1></h1>

3.文本标签：<font>文本内容</font>

4.文本加粗标签：<strong>加粗字体</strong> <b>加粗字体</b>

5.文本倾斜标签：<em>斜体文字</em> <i>斜体文字<i/>

6.删除线标签：<del>文字<del/> <s>文字</s>

7.下划线标签：<ins>文字</ins> <u>文字</u>

2.2图片标签

1.src：图片来源

2.alt：替换文本，图片不显示的时候显示的文字

3.title：提示文本，鼠标放到图片上显示的文字

4.width：图片宽度

5.height：图片高度

（三）路径

3.1相对路径

相对于文件自身出发，就是相对路径

1.文件和图片(html文档)在同一个目录(文件夹),直接写文件名。

2. 图片(html)在文件的上一级目录里, .. +/+图片(html)名称

3.图片(html文档)在文件在下一级目录里。文件夹名称+/+图片(html)名称

4.图片在文件的上一级的其他目录里, .. /文件夹名称/图片名称

3.2绝对路径

（四）超链接

指单击链接,就会跳转到链接指向的页面的链接,当然超链接也是可以链接图片,程序,甚至
音乐,影像等非页面的元素。

<!-- 超链接标签 -- >
<a href="02.html" title="图片标签"target="self">超链接</a>

1. href 去往的路径(跳转的页面)必写属性

2.title 提示文本鼠标放到链接上显示的文字

3.target="_self" 默认值在自身页面打开(关闭自身页面,打开链接页面)

4.target="_blank"打开新页面(自身页面不关闭,打开一个新的链接页面)

4.1锚链接

1. 先定义一个锚点

2. 超链接到锚点

4.2空链

（五）列表

5.1无序列表

<ul type=" ">

<li>内容</li>

</ul>

type="square" 小方块
type="disc" 实心小圆圈

type="circle" 空心小圆圈

5.2有序列表

<ol>

<li></li>

</ol>

type="1,a,A,i,l" type的值可以为1,a,A,i,l
start="3" 决定开始的位置。

5.3自定义列表

<dl>
<dt>小标题</dt>
<dd>解释标题</dd>
<dd>解释标题</dd>
</d1>

（六）表格

6.1标准结构

 <table>
        <thead>
            <tr>
                <td></td>
                <td></td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td></td>
                <td></td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td></td>
                <td></td>
            </tr>
        </tfoot>
    </table>

6.2表单和单元格合并

表头<caption></caption>

单元格合并
colspan="2"合并同一行上的单元格

rowspan="2"合并同一列上的单元格

6.3表格标题、边框颜色、内容垂直对齐

表格标题：th用法和td一样,标题的文字自动加粗水平居中对齐

valign="top | middle | bottom"

（七）表单

7.1 表单域

action:处理信息

method="get | post"

1.get通过地址栏提供(传输)信息,安全性差。
2.post通过1.php来处理信息,安全性高。

7.2文本输入框

用户名 :< input type="text" maxlength="6" readonly="readonly"
disabled="disabled" name="username" value="前端">

maxlength="6" 限制输入字符长度

readonly="readonly" 将输入框设置为只读状态(不能编辑)

disabled="disabled" 输入框未激活状态

name="username" 输入框的名称

value="大前端” 将输入框的内容传给处理文件

7.3密码输入框

密码 :< input type="password" name="pwd">

注意:文本输入框的所有属性对密码输入框都有效。

7.4单选框

<input type="radio" name="gender" checked="checked">男

只有将name的值设置相同的时候,才能实现单选效果。
checked="checked"设置默认选择项。

7.5下拉列表

<select multiple="multiple">
<option>下拉列表选项1</option>
<option>下拉列表选项2</option>
<option>下拉列表选项3</option>
<option selected="selected">下拉列表选项4</option>
</select>

multiple="multiple"将下拉列表设置为多选项
selected="selected"设置默认选中项目

<optgroup label="动漫">
<option>热血类</option>
<option>冒险类</option>
<option>搞笑类</option>
</optgroup>

<optgroup></optgroup>对下拉列表进行分组。
label=" "分组名称。

7.6多选框

<input type="checkbox"checked="checked">画画
<input type="checkbox" checked="checked">打游戏
<input type="checkbox" checked="checked">看电视

checked="checked"设置默认选中项

7.7多行文本框

cols 控制输入字符的长度。

rows 控制输入的行数

7.8文件上传控件

<input type="file"> 文件提交按钮

7.9提交按钮

<input type="submit">可以实现信息提交功能

7.10普通按钮

不能提交信息,配合JS使用。

7.11图片按钮

图片按钮可实现信息提交功能

提交按钮与图片按钮的区别:唯一的区别就是type=image的input提交方式会把按钮点击的位置坐标x,y提交过去。

7.12重置按钮

信息重置到默认状态

7.13表单信息分组

<form action="1.php" method="post">
        <fieldset>
            <legend>
                分组信息
            </legend>
        </fieldset>
    </form>

<fieldset></fieldset> 对表单信息分组

<legend></legend>表单信息分组名称