HTML基础入门总结（一）

低调的丶行者

已于 2022-11-03 09:55:27 修改

阅读量92

点赞数 2

分类专栏： html+css+js笔记文章标签： html css 前端

于 2022-11-03 09:04:55 首次发布

本文链接：https://blog.csdn.net/m0_74794442/article/details/127662995

版权

html+css+js笔记专栏收录该内容

8 篇文章 1 订阅

订阅专栏

一、基础认识

1.基本认识

1.网页组成

文字、图片、视频、音频、超链接

2.常用的五大浏览器

IE浏览器、火狐浏览器、谷歌浏览器、Safari浏览器、Opera浏览器

3.web标准

Web标准中分成三个构成

构成语言说明

结构 HTML 页面元素内容

表现 CSS 网页元素的外观和位置等页面样式（如：颜色、大小）

行为 JavaScript 网页模型的定义与页面交互

2.1.1HTML概念

HTML (Hyper Text Markup Language) 中文超文本标记语言

专门用于网页开发的语言，主要通过HTML 标签对网页中的文本、图片、视频、音频等内容进行描述

文字变粗案例

<strong> 你猜，这个字是加粗的吗？</strong>

2.2.1HTML页面固定结构

网页存在固定的结构，如：整体、头部、标题、主体；是通过HTML标签进行描述的。

3.1注释

crtl + / 浏览器不会执行注释的内容

3.

2.1HTML标签结构

<、>、/、英文单词或字母组成，

3HTML标签的关系

父子关系（嵌套关系）：

兄弟关系（并列关系）：

二、HTML标签的学习

1..1.1标题标签

代码：h系列标签

    <h1>1级标题</h1>
    <h2>2级标题</h2>
      ....
    <h6>6级标题</h6>

1-6级标题，重要程度依次递减

特点：

文字都有加粗

文字都有变大，并且从h1->h6文字依次减小

独占一行

1.2.1段落标签

场景：在新闻和文章中，用于分段显示

代码：<p>;

1.3.1换行标签

<br/>

强制换行

1.4.1水平线标签

<hr/>

2.1文本格式化标签的介绍

加粗、下划线、倾斜、删除线等效果

标签	说明	标签	说明
b	加粗	strong	加粗
u	下划线	ins	下划线
i	倾斜	em	倾斜
s	删除线	del	删除线

s 删除线 del 删除线

3.1媒体标签

3.1.1图片标签的介绍

<img src="1.jpg" alt="替换文本”>

3.1.2 路径

页面加载图片，需要先找到对应的图片

相对路径

./表示当前文件夹（同级别）

下级文件

image/目标图片.jpg

上级文件

../

3.3.1音频标签

audio

src 路径

controls 显示播放的控件

autoplay 自动播放（部分浏览器不支持）

loop 循环播放

MP3 wav ogg

3.4.1视频标签

video

4.1连接标签

<a href="www.baidu.com">跳转到百度</a>

补充：

常用特殊字符：

常用控件

1.单选按钮控件

<form action="">
  <input type="radio" name="sex" value="male">男<br>
  <input type="radio" name="sex" value="female">女
</form>

Ps：

当name属性的值一致时，可以实现单选按钮单个选中
checked属性值为true时，表示单选按钮被选中

2.复选框控件

<form>
  <input type="checkbox" name="vehicle" value="Bike">我喜欢自行车<br>
  <input type="checkbox" name="vehicle" value="Car">我喜欢小汽车
</form>

3、下拉列表控件

<select>
    <option>Volvo</option>
    <option>Saab</option>
    <option>Mercedes</option>
    <option>Audi</option>
</select>

Ps：

disabled属性值为true时，禁用下拉列表
selected属性可以设置某个列表项被选中

4、文本域控件

<textarea cols="40" rows="20">
    这是一个文本域控件
</textarea>

5、表格

<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

Ps：

cellspacing="0"：设置单元格无间距
cellpadding="10" 设置单元格边距

6、有序列表

有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。列表项使用数字来标记。

<ol>
  <li>Coffee</li>
  <li>Milk</li>
</ol>

7、无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

<ul>
  <li>Coffee</li>
  <li>Milk</li>
</ul>

8、自定义列表

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

<dl>
    <dt>Coffee</dt>
        <dd>- black hot drink</dd>
    <dt>Milk</dt>
        <dd>- white cold drink</dd>
</dl>

低调的丶行者

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML基础入门总结（一）

初识HTML，html的一些文本设置方式，和一些控件和常用特殊字符的简单介绍。
复制链接

扫一扫

专栏目录