HTML基础知识

最新推荐文章于 2024-04-18 16:28:46 发布

师玉幺叔

最新推荐文章于 2024-04-18 16:28:46 发布

阅读量105

点赞数

分类专栏： web前端知识

本文链接：https://blog.csdn.net/weixin_45663954/article/details/117420897

版权

web前端知识专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.HTML语法规范
2.HTML基本结构标签
3.开发工具
4.HTML常用标签
5.HTML中的注释和特殊字符
6.查阅文档的方式

1.HTML语法规范
   1.1规范
       1)由尖括号包含关键字
       2)包含开始标签和结束标签
       3)有些特殊标签，称为单标签，例如：<br />
   1.2 标签关系
       包含和并列
           包含：<head> <title></title> <head/>
           并列：<head></head> <body></body>


2.HTML基本结构标签--也叫骨架标签
   HTML页面也叫HTML文档


3.开发工具
   VSCode的使用
   <!DOCTYPE>：文档类型声明，必须写在HTML标签的首行
   字符集：UTF-8、GBK


4.HTML常用标签
   标签语义
       1)标题标签：<h1></h1>---<h6></h6>

       2)段落标签：<p></p>

       3)换行标签：<br /> --单标签，break的缩写，强制换行，将其放在需要换行的文字后面

       4)文本格式化标签：为文字设置粗体、斜体或下划线等效果
           <strong></strong>：加粗 *****
           <em></em>：倾斜 *****
           <del><、del>：删除
           <ins></ins>：下划线

       5)没有语义的标签，相当于盒子，用于布局网页
           <div></div> ---分割，一行只能放一个div --大盒子
           <span></span> ---跨度、跨距，一行可以放多个span --小盒子

       6)图像标签和路径
           a.图像标签：<img src= "图像的URL" alt="替换文本" title="提示文本" width="500" border="15" />
               前提必须把图片放到与网页文件的目录中
               src属性：是图像标签必备的属性，指定图像文件的路径或者文件名
               alt属性：当图片显示不出来时，会用该属性值替换
               title属性：提示文本，当鼠标放到图像上，会提示该属性值
               width属性：设定图像的宽度--要么修改宽，要么修改高，让其等比例缩放，保证图片不会失真
               height属性：设定图像的长度
               border属性：设定图像边框的粗细--像素，一般在CSS中设定
           b.相对路径：
               下级路径：/
               上一级路径：../
           c.绝对路径--较少使用 \

       7)超链接标签：<a href="跳转目标" target="_blank">文本或图像</a>
           作用：从一个页面链接到另一个页面
           href属性：跳转目标，必须具备该属性
           target属性：目标窗口的弹出方式，默认为_self，在当前窗口打开，_blank为在新窗口打开
           a)外部链接：必须以http://www开头
           b)内部链接
           c)空链接：<a href="#"> 首页 </a>
           d)下载链接：点击之后会下载文件
           e)网页元素链接
           c)锚点链接：点击链接，可以快速定位到页面的某个位置
               1.在链接文本的href属性中，设置属性值为 #名字的形式，如 <a href="#two"> 第2集 </a>
               2.找到目标位置标签，里面添加一个id属性="刚才的名字"，如 <h3 id="two">第2集介绍</h3>

       8)表格标签：
           主要作用：用于显示、展示数据，提高可读性
           a)基本语法：
                   <table>
                       <tr> --行
                           <td>单元格内的文字</td> --列、单元格
                           ...
                       </tr>
                       ...
                   </table>
           b)表头单元格标签：<th></th>
                   <table>
                       <tr> --行
                           <th>单元格内的文字</th> --表头单元格、居中、加粗
                           <td>单元格内的文字</td> --列、单元格
                           ...
                       </tr>
                       ...
                   </table>
           c)表格结构标签：
                   <thead></thead>表示头部区域--即第一行
                   <tbody></tbody>表示主体区域
           d)合并单元格：
                   合并单元格的方式：
                           1.跨行合并：rowspan="合并单元格的个数"
                           2.跨列合并：colspan="合并单元格的个数"
                   目标单元格：
                           1.跨行：最上侧单元格为目标单元格，写合并代码
                           2.跨列：最左侧单元格为目标单元格，写合并代码
                   合并单元格步骤：
                           1.确定跨行还是跨列
                           2.找到目标单元格比如：<td colspan="2"></td>
                           3.删除多余的单元格

       9)列表标签--用于布局
               a)无序列表(重点)
                           <ul>
                               <li>列表项1</li>
                               <li>列表项2</li>
                               <li>列表项3</li>
                               ...
                           </ul>

               b)有序列表：
                           <ol>
                               <li>列表项1</li>
                               <li>列表项2</li>
                               <li>列表项3</li>
                               ...
                           </ol>

               c)自定义列表(重点)：
                           选项都是围绕标题的，就使用自定义列表
                           <dl>
                               <dt>名词</dt>
                               <dd>名词解释1</dd>
                               <dd>名词解释2</dd>
                               ...
                           </dl>

       10)表单标签：
               a)为什么需要表单？--收集用户信息
               b)表单的组成：
                   1.表单域:包含表单元素的区域，实现用户信息的收集和传递，<form>会将其表单内的元素信息提交给服务器
                           <form action="url地址" method="提交方式" name="表单域名称">
                               各种表单元素控件
                           </form>

                   2.表单控件(也称为表单元素)：
                               1)input输入表单元素--用于收集用户信息，单标签
                                                   <input type="属性值" /> --type指定输入表单元素的类型
                                                   注意：1.name和value是每个表单元素都有的属性值，主要给后台人员使用
                                                       2.name表单元素的名字，要求单选按钮和复选框要有相同的name值
                                                   checked：首次加载的默认选项，主要针对单选按钮和复选按钮
                                                   maxlength：正整数，规定输入字段中的字符的最大长度，较少使用

                               <label></label>标签：用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器会自动将焦点(光标)转到或者选择对应的表单元素上，用来增加用户体验
                               语法：
                                   <label for="sex">男</label>
                                   <input type="radio" name="sex" id="sex" />
                               核心：
                                   <label>标签的for属性应当与相关元素的id属性相同

                               2)select下拉表单元素：
                                           <select>
                                                   <option>选项1</option>
                                                   <option selected="selected">选项2</option>
                                                   <option>选项3</option>
                                           </select>

                               3)textarea文本域元素--定义多行文本输入框
                                           <textarea>请输入今日反馈</textarea>

                   3.提示信息


5.HTML中的注释和特殊字符
   注释标签： 快捷键 ctrl+/
   特殊字符：
         代表一个空格
       < < 小于号
       > > 大于号

6.查阅文档的方式