《HTML基础学习》

最新推荐文章于 2024-07-04 16:37:43 发布

pa_miao_chi

最新推荐文章于 2024-07-04 16:37:43 发布

阅读量391

点赞数

分类专栏：语言学习文章标签：前端开发语言 html

本文链接：https://blog.csdn.net/chenjieyujiayou/article/details/127713035

版权

语言学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文是记录Web前端学习笔记，内容来自书籍《Head First HTML 与 CSS》和 B站视频

https://www.bilibili.com/video/BV11t411K74Q，以Q&A形式记录，初次接触前端，如果有问题欢迎大家指正，本文适合跟我一样的Web前端初学者

Q：Web服务器的工作

不停的等待来自Web浏览器的请求，这些请求可能是图片，声音，也可能是视频
服务器收到这些请求资源时，会查找所有请求的资源，然后把找回的资源发回给浏览器
每个服务器会存储HTML文件，图像，声音，视频等，浏览器发送请求，要求得到HTML或其他资源，如果服务器找到这个资源，就会将它发送给浏览器

Q：Web浏览器的工作

单击链接访问某个页面，浏览器会向服务器请求一个HTML页面，服务器提供这个页面之后，把它发送到浏览器，在浏览器中显示
浏览器读到HTML时，会翻译文本中的所有标记
标记是由尖括号括起来的词或者字符，标记会告诉浏览器文本的结构和含义

Q：常用的标记都有哪些

<html> </html> :告诉浏览器文件的内容是一个HTML
<head></head>: 首部包含Web的有关信息
<body></body>:指定页面主体，就是在浏览器中看到的那部分
<h1></h1>:标题字，html支持h1~h6
<p></p>:段落标签
<pre></pre>：插入一段源代码
<del></del>:删除字
<ins></ins>: 表示已经被插入文档中的文本
<b></b>粗体字
<i></i>:斜体字
<q></q>:在html中加简短的引用，引用的内容无需加双引号，浏览器会负责加上双引号；如果只是把一个引用放入现有的文字中用这个，属于内联元素，会显示在段落中
<blockquote></blockquote>: 引用一段或者多段文字，是块元素，块元素会单独显示
<br>表示回车，属于void 元素，没有任何内容，<img>也属于void元素
<em></em>：强调，想用不同的方式展示文本
<time></time>：告诉浏览器这个内容是一个日期或者时间
<strong></strong> : 加粗文本
10<sup>2</sup> 表示2在10的右上角
10<sub>m<sub> 表示m在10的右下角
<font color="red">hi</font>: 字体标签
实体符号：以&开始，以;结束 < 表示小于号 > 表示大于号   表示空格

Q：CSS简介

css 可以描述如何表现你的内容，装饰html, 相当于给html化妆
使用<style></style> ，放在html首部里，即<head></head>中
background-color: 设置背景色
margin-left/:margin-right：设置左右外边距
border: 2px dotted balck: 设置边框为黑色虚线
padding ：设置内边距
font-family: 指定字体

Q：HTML创建超链接

<a href = "https://www.xxx.com"></a>
超链接是用来创建指向另一个页面的链接，在浏览器中，链接文本会显示下划线，指示这是可以点击的
html中使用href属性指定链接的目标文件，它是一个超文本引用，是互联网或者你的计算机上的一个资源的别称，通常这个资源是一个Web界面，也可以是一个PDF文档，实际上可以指向各种各样的资源
href可以指定相对路径，链接到对应的文件夹中
href:hot reference热引用，href属性后面一定是一个资源的地址，后面的路径可以是相对路径，也可以是网络中某个资源的路径，也可以是本地资源的路径
也可以给图片添加超链接

<a href="https://www.baidu.com">
        <img src="../../../插画师/创作/《你还有我》.png" width="100px" />
        </a>

target 属性是规定超链接在哪个窗口打开，有以下几种打开方式
_blank ：新窗口 _self: 当前窗口（默认） _top: 顶级窗口 _parent:父窗口
网页的路径里面，只能使用"/",不能使用"\"

Q：下拉列表如何支持多选

可以给 select 设置multiple属性，size指定设置条目的数量
按住ctrl键进行多选

<select multiple="multiple" size="2">
            <option>英语</option>
            <option>日语</option>
            <option>韩语</option>
            <option>西班牙语</option>
        </select>

Q：如何创建一个列表

使用两个元素，第一个元素标记每个列表项，第二个元素确定你创建的是哪种类型的列表：有序列表还是无序列表
第一步：将每个列表项放在一个<li></li>中
第二步：用<ol></ol>或者<ul></ul>包含列表项

<ol>表示有序列表 <ul>表示无序列表

 <!--有序列表-->
        <ol type="A">
            <li>水果
                <ol type="i">
                <li>苹果</li>
                <li>西瓜</li>
                <li>桃子</li>
                </ol>
            </li>
            <li>蔬菜</li>
            <li>甜点</li>
        </ol>
        <!--无序列表-->
        <ul type="circle">
            <li>中国
                <ul type="disc">
                    <li>北京
                        <ul type="square">
                            <li>朝阳区</li>
                            <li>东城区</li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>

Q：图像

浏览器在页面中显示这个图像之前，必须先获取这个图像
Web常用的3种格式：JPEG PNG GIF
JPEG: 适合连续色调图像，比如照片；可以包含1600万种不同颜色的图像；是一种”有损“格式，缩小文件大小时，会丢失图像的一些信息；不支持透明度；文件比较小；不支持动画
PNG: 适合单色图像和线条构成的图像；可以包含上百万种不同颜色的图像；无损格式，缩小文件，不会丢失信息；目前提供的格式有PNG-8 PNG-24 PNG-32 可以选择适当的文件大小
GIF: 可以表示最多256种不同颜色的图像；无损格式；支持透明度；支持动画；比相应的JPEG文件大；只能设置一种颜色透明
使用选择方式: JPEG 擅长处理照片； PNG 适合需要透明和很多颜色的时候使用； GIF适合动图

Q：如何为你的页面增加图像

<img src="images/drinks.gif">
src 指定了在Web页面上显示的图像文件的位置
img是一个void元素
src不只是用于相对链接，还可以放入url
可以增加alt属性：指定描述这个图像的一些文本，主要是为了图片丢失显示该文字或者视觉障碍患者可以听到该图片的具体的描述信息
可以增加title属性：title是设置鼠标悬停显示的信息

Q：HTML的一些标准

<!doctype html>：告诉浏览器我们在使用标准的HTML，即HTML5
w3c验证工具：http://validator.w3.org
w3c 这个工具对你写的html代码进行检查，有以下三种检查方式

如果你的页面在Web上，则可以在这里输入url,单击check按钮，这个服务会获取你的HTML，并完成检查
可以选择第2个标签，从计算机上上传一个文件，单击check按钮
将你的HTML复制到这个标签页的表单中，然后单击check按钮

<meta charset="uft-8"> ：告诉浏览器采用哪一种字符集打开当前页面
只能在<head>元素中放入<title> <meta> <style>元素
:HTML的注释

Q：如何使用HTML建立表格

使用<table>元素来标记表格
tr元素是表格中的一行
th分别是每一列的表头
td表示表格中的一个单元格
thead tbody tfoot 用于表格切割，便于之后操作

        <table border="1px" width="100%" height="150px">
            <tr>
                <th>员工编号</th>
                <th>员工薪资</th>
                <th>部门名称</th>
            </tr>
            <tr align="center">
                <td>a</td>
                <td>b</td>
                <td>c</td>
            </tr>
            <tr>
                <td>d</td>
                <td>e</td>
                <td>f</td>
            </tr>
            <tr>
                <td align="center">x</td>
                <td>y</td>
                <td>z</td>
            </tr>
        </table>

Q：如何合并单元格

方式：指定一个表格数据单元格占多少行，然后从这个单元格所跨越的其他行中删除对应的表格元素数据
row合并必须删除下面的单元格
col 合并删除哪个不影响
使用rowspan 和 colspan来实现单元格合并， rowspan = "2" 表示跨两行 colspan 表示跨多列

        <table border="1px" width="100%" height="150px">
            <tr>
                <th>员工编号</th>
                <th>员工薪资</th>
                <th>部门名称</th>
            </tr>
            <tr>
                <td colspan="2">de</td>
                <td rowspan="2">zf</td>
            </tr>
            <tr>
                <td align="center">x</td>
                <td>y</td>
            </tr>
        </table>