前端开发——HTML的知识（笔记）

Lungcen

于 2023-03-27 23:32:20 发布

阅读量311

点赞数 6

分类专栏： Html_Css_JavaScript学习内容笔记文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/qq_64552181/article/details/129803897

版权

Html_Css_JavaScript学习内容笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

表格Table（基本特性display：table）

内联框架iframe （display：inline）

表单Form(display：block)

Html简单介绍

html是一种超文本标记语言，主要用于web开发工作，是web前端开发的基础。主要用于编写静态网页的框架结构。

除了开发阶段，html都是远程访问的。不需要联网就可以完成的操作，就是本地访问。

需要连接互联网才能完成的操作，就是远程访问。

Html结构简介

<元素（标签）属性=“属性值” 属性=“属性值”> 内容 </元素（标签）>

元素（标签）基本都是成对出现的，如果一对之间，没有内容只包含属性即空元素（空标签），没有结束标签，可以在开始标签末尾加入 / 来表示结束，开始和结束标签也被称为开放标签和闭合标签

html当中的元素（标签）、属性以及所有的标点符号，都为英文（特别是逗号容易打成中文）

属性是在 HTML 元素的开始标签中规定，如果属性值本身就含有双引号，那么必须使用单引号

注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。

<!DOCTYPE html>>
    <!-- 这是一个HTML文件（html5声明）-->
    <!-- 它告诉浏览器网页所使用的 Html 规范是什么。 -->
<html lang="en">
    <!-- html表示为代码的总体的开头，其中lang代表语言种类-->
<head>
    <!-- html结构的“头”，主要作用为控制"身体" -->
    <meta charset="UTF-8">
    <!-- 字符集编码格式为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>
<body>
    <!-- html结构的"身体"，网页内容都写在这里-->   
</body>
</html>

Html基本语句

<body>
    <p>我是段落标签</p>
    <b>我会加粗的</b><br/>
    <strong>我是强调并加粗的</strong>
    <em>我是斜体，强调</em>
    <h6>我是标题六</h6>
    <h5>我是标题五</h5>
    <h4>我是标题四</h4>
    <h3>我是标题三</h3>
    <h2>我是标题二</h2>
    <h1>我是标题一</h1>
    <sub>下标</sub>
    <sup>上标</sup>
    <del>今天天气不好！</del> 
    <span>今天天气真好！</span>
    <hr />
    <p>在页面中创建水平线，用于分隔内容。</p>
    <div>我是块，用来当容器</div>
</body>

实体字符集

在HTML中连续的空格或空行都会被算作一个空格（行内元素/行内块元素）

显示结果陈述实体名称
空格  

Html的元素简介

超链接

<a href = "#">内容</a>

1、内容一定要存在，否则页面上不会有超链接显示

<a href = "http://www.baidu.com">这是百度</a>

2、href的属性值，输入网址的时候，一定要有http：//，否则网页无法正常显示。如果导入本地html文件，需要输入相对路径。

3、内容的位置可以是图片或其他 HTML 元素都可以成为链接，起到美观作用，增加用户体验。

4、使用 target 属性，你可以定义被链接的文档在何处显示：默认为_self，在原窗口打开链接， _blank在新窗口打开，_top是跳出框架，如果页面被固定在框架之内。

5、name 属性规定锚点（书签），也可以用id 属性来替代 name 属性，命名锚点同样有效。
    <h1 id="toubu">我是头部标题</h1>
    <a id="tou">我是头部内容</a>

    <a href="#tou">回到头部内容</a>
    <a href="#toubu">回到头部标题</a>
6、扩展：<a href = "#">内容</a>里的 # 包含了一个位置信息，默认的锚是 #top 也就是网页的顶端，死链接可以把 # 换成 javascript:void(0)，这时候点击不会再有效果。

关于超链接的一些css属性演示

<!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>
    <style>
        a{ /*css设定超链接没有下划线*/
        color: red;
        text-decoration: none;
        font-size:50px;
        background-color: black;
        }

        a:hover { /*css设定当鼠标悬停的时候的属性集合*/
        color:blue;
        text-decoration:underline;
        font-size: 80px;
        }
    </style>
        
</head>
<body>
    <h1 id="toubu">我是头部标题</h1>
    <a id="tou">我是头部内容</a>
    <a href="#tou">回到头部内容</a>
    <a href="#toubu">回到头部标题</a>
    <a href="#">hihiihi</a>
    
</body>
</html>

图片

<img src="#" title="#" alt="#"/>

1、src源属性（source）的取值可以是图片的相对路径，也可以是图片的网址；和超链接的href属性作用基本相同；

2、title里的内容，鼠标悬停的时候会显示，为元素的额外信息（元素都有title属性）；

3、alt属性用来为图像定义一串预备的可替换的文本，在浏览器无法载入图像时，替换文本属性告诉读者他们失去的信息；

4、图片可以设置宽和高，只设置一项，另一项浏览器会根据比例自适应，如果图像指定了高度宽度，页面加载时就会保留指定的尺寸，如果没有指定图片的大小，加载页面时有可能会破坏页面的整体布局；

有序/无序列表/定义列表

有序列表
<ol type="#" start="#">
    <li>北京</li>
    <li>上海</li>
    <li>广州</li>
    <li>重庆</li>
</ol>
type值只有五个，a，A，i（小写罗马字母），I（罗马字母/希腊），1

start：从几开始计数，只能是整数，小数点后面的不识别

无序列表
<ul type="disc">
    <li>北京</li>
    <li>广州</li>
    <li>上海</li>
    <li>重庆</li>
</ul>
默认type="disc"实心圆、 circle 空心圆、square实心方块

定义列表（列表项<dt>；列表项的定义<dd>）
<dl>
    <dt>北京</dt>
    <dd>祖国首都</dd>
    <dt>石家庄</dt>
    <dd>河北省会</dd>
</dl>

表格Table（基本特性display：table）

单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等；

<table border="1px" width="500px" height="200px" bordercolor="red">
        <!-- 表格-->
        <caption>标题</caption>
        <thead><!-- 表格的页眉-->
            <tr><!-- 行-->
                <th>表格标题</th>
                <th>表格标题</th>
                <th>表格标题</th>
                <th>表格标题</th>
                <th>表格标题</th>
            </tr>
        </thead>
        <tbody><!-- 表格的主体-->
            <tr>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
            </tr>
            <tr>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
            </tr>
            <tr>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
            </tr>
        </tbody>
        <tfoot><!-- 表格的页脚-->
            <tr>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
            </tr>
        </tfoot>
    </table>

注意事项及总结：

1、不要给table,th,td以外的表格标签加样式，会出现兼容性问题；

2、单元格默认平分table 的宽高；

3、th里面的内容默认加粗并且左右上下居中显示；

4、td里面的内容默认上下居中左右居左显示；

5、table 决定了整个表格的宽度；

6、table里面的单元格宽度会被转换成百分比；

7、表格里面的每一列必须有宽度；

8、表格同一竖列继承最大宽度；

9、表格同行继承最大高度；

10、IE7以下，表格td或者th不能为空，否则不显示表格占位，可以添加一个

内联框架iframe （display：inline）

a、Iframe - 设置高度和宽度：height 和 width 属性用于规定 iframe 的高度和宽度，属性值的默认单位是像素，但也可以用百分比来设定（比如 "80%"）；

b、frameborder 属性规定是否显示iframe 周围的边框，设置属性值为"0" 就可以移除边框；

c、a元素的target属性指向页面中某个内联框架的name值，就可以把href里的地址在该框架中展示；

d、scrolling：规定是否在 iframe 中显示滚动条，属性值：yes/no/auto；

表单Form(display：block)

1、form，第一个作用是存放控件的容器，另外一个重要作用就是将表单提交给后台或者是另一个页面。

<form action=”url”method=”#”name=“#”enctype="text/plain">控件</form>
url 此处为提交的对象，一般是.jsp/action/servlt
method="#" 提交的方法，值get/post显性传参/隐性传参
enctype对表单数据进行编码值：application/x-www-form-urlencoded
                            multipart/form-data
                            text/plain

2、input，<input type="*" name="**"value="***" accesskey=""/>

text 文本框

password 密码

radio 单选

checkbox 复选

submit 提交

reset 重置

button 按钮

image 图片

file 上传

hidden 隐藏

search 搜索框（火狐暂不支持）

range 滑动条

用label标签进行标注，提升用户体验，for的值，就是input里id的值