HTML基础知识速成(学完可基本看懂网页结构)

是羽十八ya

已于 2022-04-27 22:50:02 修改

阅读量3k

点赞数 10

分类专栏：前端学习笔记文章标签： javascript chrome 前端 html 文档资料

于 2022-04-25 23:59:40 首次发布

本文链接：https://blog.csdn.net/yushiba972/article/details/124415406

版权

3 篇文章 1 订阅

订阅专栏

“若想要和网页做对比，点击F12，进入开发者模式，边学边看，尝试了解当前页面结构”

基本概念

HTML
- 超文本标记语言，由一套标记标签组成。
标签分类
- 单标签：<标签名/>
- 双标签：<标签名></标签名>
- 带属性的标签：<a 属性名 = " 属性值 " > a代表标签类型为链接
标签元素
- class：为html元素定义一个或多个类名(类名从样式文件引入)
- id：定义元素的唯一id
  - 通过id可精准定位网页元素
- style：规定元素的行内样式
- title：描述了元素的额外信息 (作为工具条使用)
注释
-
基本网页骨架标签
- 主要代码块写在body部分，head也可携带信息
- 编码方式为UTF-8 或 GBK 支持中文编码

<!DOCTYPE html>
<html>
<head>
    <meta charset = "UTF-8">        <!--编码方式-->
    <title>页面的标题</title>
</head>
<body>
        代码块
</body>
</html>

⭐下列演示代码，除第一个示例外，其余放在body里面实现！！！

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试网页</title>
</head>
<body>

<h1>h1的大小</h1>
<h2>h2的大小</h2>


</body>
</html>

<a href="https://www.baidu.com">百度的链接</a>

<img src="url" width="xxx" height="xxx" />

<p>下面是水平线<hr>上面是水平线<p/>

<p>人生<br>若只如初见<br>何事秋风悲画扇<p/>

⭐下列代码要放在head里面！！！

<head><base href="http://www.baidu.com" target="_blank"></head>

<head><link rel="stylesheet" type="text/css" href="mystyle.css"></head>

<style type="url">
<！--假如为同级文件夹下的decorate的CSS文件，则可写为：<style type="decorate/css">-->

<meta id="author" content="羽十八">    <!--定义网页作者-->
<meta http-equiv="refresh" content="60">    <!--每60秒钟刷新当前页面-->

<script src="url"></script>

<img src="man.jpg" alt="there is a man">

<ol>
<li>奥力给</li>
<li>奥利奥</li>
</ol>

<ul>
<li>奥力给</li>
<li>奥利奥</li>
</ul>

<dl>
<dt>奥力给</dt>
<dd>..........奥利奥</dd>
<dt>奥特曼</dt>
<dd>..........奥利奥</dd>
</dl>

<form>
生日: <input type="text"><br>
年龄: <input type="text" >
</form>

<form>
密码: <input type="password">
</form>

单选按钮：<input type="radio">

<form>
<input type="radio" >China<br>
<input type="radio" >UK
</form>

复选按钮：<input type="checkbox">

<form>
<input type="checkbox"">China<br>
<input type="checkbox">UK
</form>

提交按钮：<input type="submit">

<form >
心情: <input type="text">
<input type="submit" >
</form>

关注

专栏目录