【小枫r的学习记录001——HTML初识】

最新推荐文章于 2024-07-25 22:24:14 发布

明月清风我♀

最新推荐文章于 2024-07-25 22:24:14 发布

阅读量99

点赞数 1

文章标签：学习 html 前端

本文链接：https://blog.csdn.net/m0_74091650/article/details/129746732

版权

【小枫r的学习记录001——HTML初识】

写在最初：
本文为记录前端开发学习历程而生，用于回顾复习，知识点比较琐碎，也省略了一些冗长的定义解释型内容。如有错误，多谢指正。

语法规范

标签&标签关系

双标签
多数标记成对出现，有开始就有结束。
例如：

<font>这是我的第一个网页</font>,<head></head>

单标签
相对来说，单标记数量不多，需要记忆掌握。
例如：
<br>,<hr>...
标签关系
并列关系
例如：
<head></head>与<body></body>

包含关系
例如：
<head></head>与<title></tile>

HTML基本结构标签

标准的网页结构如下：

<!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>

开发工具

网页开发工具很多，如dreamweaver，webstorm等，笔者目前主要使用VScode，主要对VScode的使用做一些补充。

VScode工具生成骨架标签新增代码

<!DOCTYPE > : 文档类型声明，告诉浏览器用哪种版本的html来显示网页，处于之前。
<lang > : 定义当前文档显示的语言。用来提示浏览器，en为英文，zh-ch为中文。
<charset>：字符集，定义字符编码方式。如：GB2312，GBK,UTF-8等（一定要写出来且写成国际统一形式，否则可能出现乱码）
（这些在打开VScode创建基本框架后会直接存在，不需要每次输入。）

HTML常用标签*

标题标签

标题标签是为了显示页面标题，在HTML中分为6个等级，h1—h6，依据重要性依次递减。

段落标签·换行标签

段落标签：<p></p>，用于为网页文本分段。
换行标签：<br />,用于网页文本的强制换行。

文本格式化标签

文本格式化标签：主要是为了突出文本的重要性，加强语气，比普通文字更加重要常见的文本格式化标签

`<div><span>`标签

没有语义，可以看作是一个空盒子，用来装内容。（大盒子）
注意：一个< div >独占一行，一个< span >在一行上可以放多个。（小盒子）

图像标签·路径*

图像标签：<img src="图像URL"/ >(单标签)
src是图像标签的必须属性，用于指定图像文件的路径和文件名。其他属性见下图。
在这里插入图片描述

注意
- 图像标签可以拥有多个属性，跟在标签名后面。
- 属性之间不分先后，标签与属性，属性与属性之间空格隔开。
- 属性采取键盘值对形式，属性=“属性值”。

路径
（1）目录文件和根目录
目录文件指存放与网站相关的所有素材的文件。
根目录指打开目录文件的第一层的文件。
（2）路径相对路径
绝对路径 即图片的完整的文件地址，但由于每个人的电脑文件的不同，所以用来不太方便，一般不常用这种方法来显示图片地址。

超链接标签

**超链接标签语法格式<a href="跳转目标" target="目标窗口弹出方式">
跳转目标即指定连接目标的url地址
_self为默认值&_blank为新窗口中打开。
链接分类
1.外部链接
需链接目标网页完整地址
2.内部链接
网站内部链接，直接链接内部页面名称即可。
3.空连接
<a href="#">
4.下载链接
<a href="压缩包地址">
5.网页元素链接
<a href="网址">
6.锚点链接
可以快速定位到页面的某个位置。
首先将href属性设置属性值为“#名字”。
再将目标位置标签加一个id属性。
例如：
(链接位置)<a href="#two">
（目标位置）<h3 id="two">

HTML中的注释和特殊字符

注释语法格式为 < !–文本–>（快捷键：crtl+/）
在这里插入图片描述

表格标签

表格的主要作用是显示，展示数据。

表格的基本语法

    <table>
        <tr>
            <td></td>
        </tr>
    </table>

<table><table>用于定义表格的标签
<tr> </tr>用于定义表格中的行，必须嵌套在<table></table>中
<td></td>用于定义表格中的单元格，必须嵌套在<tr> </tr>中

表头单元格

<th></th>一般表头单元格位于表格的第一行第一列，表头单元格里的文本加粗居中显示。

表格属性

表格属性
应用示例：

    <table align="center" border="1" cellpadding="20" cellspacing="0" width="500" height="250">
        <thead><tr><th>姓名</th> <th>数学成绩</th> <th>语文成绩</th></tr></thead>
        <tbody>
            <tr><th>张小枫</th><th>80</th><th>80</th></tr>
            <tr><th>李小宁</th><th>90</th><th>90</th></tr>
            <tr><th>彭小瑛</th><th>100</th><th>100</th></tr>
        </tbody>
    </table>

![在这里插入图片描述](https://img-blog.csdnimg.cn/94c665f73a224838b4c438bb9710419d.png#pic_cente

表格结构标签

为更好的表示表格语义，将表格分为表格头部和表格主体两部分，表格头部用<thead></thead>,表格主体用<tbody></tbody>表示。

合并单元格

1.合并单元格的方式
跨行合并 rowspan="合并单元格数"
跨列合并 colspan="合并单元格数"
2.目标单元格
跨行最上侧为目标单元格，写合并代码。
跨列最左侧为目标单元格，写合并代码。
注意：记得合并后删除多余单元格。
应用示例：

    <table align="center" border="1" cellpadding="20" cellspacing="0" width="500" height="250">
        <thead><tr><th>姓名</th> <th>数学成绩</th> <th>语文成绩</th></tr></thead>
        <tbody>
            <tr><th>张小枫</th><th colspan="2">80</th><th>80</th></tr>
            <tr><th>李小宁</th><th rowspan="2">90</th><th>90</th></tr>
            <tr><th>彭小瑛</th><th>100</th><th>100</th></tr>
        </tbody>
    </table>

在这里插入图片描述

列表标签

列表主要是用来布局的。

无序列表**

基本语法格式

    <ul>
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
    </ul>

1.无序列表各个表项之间没有顺序级别之分。
2.<ul></ul>只能嵌套<li></li>。
3.<li></li>可以容纳所有元素。
4.无序列表会带有自己的样式属性，可通过css设置。

有序列表

基本语法格式

    <ol>
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
    </ol>

743d08f3b0eb143a2f9ae.png#pic_center)
1.有序列表各个表项之间有顺序级别之分。
2.<ol></ol>只能嵌套<li></li>。
3.<li></li>可以容纳所有元素。
4.有序列表会带有自己的样式属性，可通过css设置。

自定义列表

自定义列表用于对术语或名词的解释或描述，列表项前无项目符号。
基本语法格式：

    <dl>
        <dt>名词</dt>
        <dd>名词解释1</dd>
        <dd>名词解释2</dd>
    </dl>

1.<dl></dl>只能嵌套<dt></dt><dd><dd>。
2.<dt></dt><dd></dd>没有限制，通常一个<dt></dt>对应多个<dd></dd>。

表单标签

表单是为了收集用户信息。

表单的组成

表单有由表单域、表单控件（表单元素）、提示信息三部分组成

表单域

表单域即包含表单元素的区域。
<form></form>用于定义表单域，会把范围内的表单元素提交给服务器，实现用户信息的收集与传递。
基本语法格式：
<form action="url地址" method="提交方式" name="表单域名称"></form>
基本属性：
在这里插入图片描述

表单控件（表单元素）

允许用户输入或选择的内容控件。

- 1.`<input>`标签输入表单元素，收集用户信息

基本语法格式：
<input type="属性值" />( 单标签)
type属性设置不同的属性用来制定不同的控件类型。
其他属性

注意：
~name和value是每个表单元素都有的属性值，主要给后台人员使用。
~ name表单元素的名字，要求单选按钮和复选框要有相同的name值。
应用示例：

    <form action="xxx.php" method="get">
        用户名：<input name="username" type="text" value="请输入用户名" maxlentgh="20"><br>
        密码：<input name="password" type="password"><br>
        性别：男<input name="sex" type="radio" value="男" >女<input type="radio" name="sex" value="女" checked="checked" ><!--单选按钮，实现多选一--><br>
        爱好：听歌<input name="hobby" type="checkbox" > 看电影<input name="hobby" type="checkbox"> 打游戏<input name="hobby"
         type="checkbox"> 跑步<input name="hobby" type="checkbox"><br><!--复选框，实现多选-->
        <input type="submit" value="免费注册"><!--提交按钮--><br>
        <input type="reset" value="重新填写"><!--重置按钮可还原表单为初始状态-->><br>
        <input type="button" value="验证码"><br>
        <input type="file"><!--文件域 上传文件-->

在这里插入图片描述

<label>标签为input元素定义标注。
<label>标签用于绑定一个表单元素，当点击标签内文本时，浏览器会自动将焦点（光标）转到或者选择对应的表单元素上，用来增加用户体验。
基本语法格式：
<label for="sex" >男</label>
<input type="radio" name="sex" id="sex" />

- 2`<select>`标签下拉表单元素控制下拉列表。

语法格式：
<select>
<option></option>
<option></option>
<option></option>
...
</select>
注意：
~<select>中至少包含一对<option>
~在<option>中定义"selected=""selected"时，当前项为默认选中项。
应用示例：

       籍贯 
        <select>
            <option>山西</option>
            <option selected="selected">吉林</option>
            <option>北京</option>
        </select>

在这里插入图片描述

- 3.`<textarea>`文本域元素定义多行文本输入

语法格式：
<textaera rows="3" cols="20">
文本内容
</texeaera>
注意：
~rows决定有多少行，cols决定有多少列。
~一般不用，用css来改变大小。
应用示例：

        今日反馈：
        <textarea rows="10" cols="80">
            分享今日心得
        </textarea>

在这里插入图片描述
写在最后
学习了新的知识，才知道自己的渺小与无知。
一以贯之的努力，不得懈怠的人生，所有微小的努力，都会变成最终的结果。

明月清风我♀

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【小枫r的学习记录001——HTML初识】

自定义列表用于对术语或名词的解释或描述，列表项前无项目符号。< dl > < dt > 名词 </ dt > < dd > 名词解释1 </ dd > < dd > 名词解释2 </ dd > </ dl >< dl > < dt > 名词 </ dt > < dd > 名词解释1 </ dd > < dd > 名词解释2 </ dd > </ dl >< dl > < dt > 名词 </ dt > < dd > 名词解释1 </ dd > < dd > 名词解释2 </ dd > </ dl >
复制链接

扫一扫