HTML入门小总结

17三三
201 阅读6分钟

HTML总结

基本概念

网页和网站

  • 网站是由N个网页组成
  • 一个网页中可以包含：文字、图片、视频、链接、程序等
  • 网页的内容是由HTML技术实现的
  • 网页的后缀一般为.html

浏览器和渲染引擎

  • 常见的浏览器：谷歌，火狐，IE，Safari，欧朋
  • 不同浏览器有不同的内核（渲染引擎）

网页的结构

  • 结构层 使用HTML技术实现，用来给网页提供内容
  • 样式层 给网页提供样式用来布局，美化
  • 交互层 用JS向网页添加交互行为，JS是前端程序员最需要掌握的核心技术

开发工具

  • VsCode、sublime text等；推荐使用VsCode，有着小巧，插件多的好处
  • 快捷键 这里是关于一些vscode工具中的快捷键 ! + tab => html基本骨架 !是英文的! shift + alt + 向下箭头 => 复制上一行 tab => 向后移动代码 shift + tab => 向前移动代码 ctrl + f => 查找内容并替换内容 等等 不仅仅拥有这些，还可以去设置里面自己设置一些快捷键

标签，属性，元素

  • 标签 标签是由<>包括起来的，分为单标签和双标签 标签可以分为块级标签,行内标签,内联块状标签三种

  • 属性 写在开始标签中，以xxx="xxx"的形式出现，一个标签中可以有多个属性 属性也分为共有属性和私有属性两类

    共有属性：如class，id，title...等

<p class="name1" id="name2">

    其中的class,id都是共有属性，即所有标签都可以使用这些属性
</p>

私有属性：如src，href...等

<a href="#">

    其中的href就是a标签中的私有属性，如在p标签中就不能使用
</a>
  • 元素 元素=标签 + 属性 + 标签之间的内容

HTML的基本骨架

文档声明

  • 为HTML5的文档声明
  • 其作用是告诉浏览器，以什么样的标准来解析我们写的代码

html元素

  • 是一个网页的根元素，只有这一个
  • lang属性：指定网页的语言 zh-CN为中文，en为英文

head元素

  • 网页的头部：基本上在对网页的设置，都会在head实现 例如style，title等标签
    • title属性：指定网页的标题的
    • meta属性：charset="utf-8"指定字符编码，如不指定，可能会出现乱码

body元素

  • 网页的主要内容是写在body标签里面的

常用标签

h系列-标题标签

    <h1>这是一个h1标签</h1>
    <h2>这是一个h2标签</h2>
    <h3>这是一个h3标签</h3>
    <h4>这是一个h4标签</h4>
    <h5>这是一个h5标签</h5>
    <h6>这是一个h6标签</h6>

运行结果为下图

h.png

p标签-段落标签

    <p>这是一个段落</p>

运行结果如下图

p.png

br-换行标签

此标签为单标签，其作用可以使网页中的内容换行显示

文本格式化标签

大多用来修饰字体的标签

    <strong>strong标签</strong>
    <b>b标签</b><br>
    <em>em标签</em>
    <i>i标签</i><br>
    <ins>ins标签</ins>
    <u>u标签</u><br>
    <del>del标签</del>
    <s>s标签</s><br>

运行结果为下图

zifu.png

无语义标签

div标签：是一个块标签
span标签：是一个行内标签
如果配上css，div和span两个标签就能写出网页

img-图片标签

此标签是一个单标签
属性：
    scr：图片的路径（来源）
    alt：当图片无法加载时显示的相关文字
    title：鼠标停留在图片上显示的稳文字
    width：设置图片的宽度
    height：设置图片的高度

<img scr="图片路径" alt="设置文字" title="设置文字" width="宽度" height="高度"> 例

<img src="./images/01.jpg" alt="二次元人物" title="初音未来" width="50%" height="50%">

如下图

01.png

路径和链接

路径： 相对路径： 在同一个文件直接找名字 ./ 向上一级 ../ 向下 / 绝对路径： 从盘符开始一级一级的往下找，一直找到目标文件，此方法很少用 a-链接标签

    外部链接：<a href="www.baidu.com">百度一下</a>

    内部链接：<a href="xx.html">xx文件</a>
    其中href的属性值为跳转的地址，标签内的内容为触发媒介

私有属性： target： _self： 默认属性值，跳转的网页覆盖原本的窗口 _blank： 属性值，跳转的网页自动新建一个窗口打开 #： 不会跳转网页，但是会刷新网页 锚点

<a href="#tp1">锚点起点</a>

<a href="#" name="tp1">锚点终点</a>
在锚点起点的a标签中href的值设置"#+name1"，锚点终点的a标签中设置name或者id="name1"即可

注释与特殊字符

  • <!--我是注释--> vscode快捷键为Ctrl + /键
  • 特殊字符

fuhao.png

列表类标签

  • 无序列表
    <ul>
        <li>无序列表</li>
        <li>无序列表</li>
    </ul>

运行结果如下图

wuxu.png

  • 有序列表
    <ol>
        <li>有序列表</li>
        <li>有序列表</li>
    </ol>

运行结果如下图

youxu.png

  • 自定义列表
    <dl>
        <dt>自定义列表</dt>
        <dd>自定义列表</dd>
    </dl>

运行结果如下图

zidingyi.png

表格类标签

  • 标签
  1. table标签是表格的基本，所有内容都是在table标签里
  2. tr标签是表格中的行
  3. td标签是表格中的单元格，代表表格中的列
  4. th标签可以用来当表头，有加粗，加黑，居中的功能
  5. caption标签用来写表格的标题，显示不在表格内
  6. thead标签为表格的结构头
  7. tbody标签为表格的结构体
  8. tfoot标签为表格的结构底
  • 属性
  1. border：表格的边框，默认0，大数值也只会影响表格最外边框
  2. width：宽度，可以设置也可分别设置表格，表行，单元格
  3. height：高度，可以设置也可分别设置表格，表行，单元格
  4. cellspacing：单元格与单元格之间的间距
  5. cellspadding：单元格与内容之间的间距
  6. align：用来对齐，有left/right/center 三个值，分别为左/右/居中
  7. colspan：列合并，多在td开始标签中设置
  8. rowspan：行合并，多在td开始标签中设置
<table border="1" align="center" width="500px" height="200px" cellspacing="0">
        <caption>表格标题</caption>
        <thead>
            <tr>
                <th>表头</th>
                <th>表头</th>
                <th>表头</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
            </tr>
            <tr>
                <td colspan="2">列合并</td>
                <td rowspan="2">行合并</td>
            </tr>
            <tr>
                <td>单元格</td>
                <td>单元格</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>表底</td>
                <td>表底</td>
                <td>表底</td>
            </tr>
        </tfoot>
    </table>

运行结果如下图

table.png

表单类标签

  • input标签属性
  1. text：文本框
  2. password：密码框
  3. radio：单选按钮（需要配合name属性）
  4. checkbox：复选框
  5. button：普通按钮
  6. reset：重置按钮 需要配合form表单才有作用
  7. submit：提交按钮
  8. file：文件按钮
  • name属性
  1. 发送后台，作为一个标识
  2. name的标识，对于单选按钮，相同name值，只能选一个
  • value属性 设置文本默认显示的文字
  • checked 在选项中作用为默认选中
  • label 可以使文本与按钮，表格等建立同步作用
  • textarea 文本域：多用于用户留言，反馈等
  • select 作用为下拉列表，配合option标签使用 添加属性selected为设置默认选中
  • form表单
  1. 主要作用是收集用户所填信息，发送到后台
  2. 属性action的属性值为提交后台的地址
  3. method="get/post" 提交（传输）后台的方式
  4. name="name1"表单的标识，告诉服务器是由哪个表单提交过来的，
<form action="">
        文本框<input type="text"><br>
        密码框<input type="password"><br>
        单选框<label for="">
            A <input type="radio" name="xuanze" id="">
            B <input type="radio" name="xuanze" id="">
        </label><br>
        复选框默认<input type="checkbox" checked>
        复选框默认<input type="checkbox" checked>
        复选框<input type="checkbox">
        复选框<input type="checkbox"><br>
        <input type="button" value="普通按钮"><br>
        <input type="reset" value="重置按钮"><br>
        <input type="submit" value="提交按钮"><br>
        <input type="file" value="上传文件"><br>
    </form>

运行结果如下

input.png

avatar
文章
阅读
粉丝