HTML基础使用 | 青训营笔记

LuoKing
151 阅读3分钟

HTML基础使用

这是我参与「第五届青训营 」伴学笔记创作活动的第 3 天

HTML简介

什么是标签语言?

标记语言，是一种将文本以及文本相关的其他信息结合起来，展现出关于文档结构和数据处理细节的电脑文字编码。与文本相关的其他信息（包括文本的结构和表示信息等）与原来的文本结合在一起，但是使用标记进行标识。

标记语言不仅仅是一种语言，就像许多编程语言一样，它需要一个运行时环境，使其有用。提供运行时环境的元素称为用户代理。

什么是HTML?

HTML 是用来描述网页的一种语言。

● HTML 指的是超文本标记语言 (Hyper Text Markup Language)

● HTML 不是一种编程语言，而是一种标记语言 (markup language)

● 标记语言是一套标记标签 (markup tag)

● HTML 使用标记标签来描述网页

HTML能做什么?

html可以做的有很多，比如我们在日常看到的静态网站，比如一些文字的大小和段落居中和一些网站的样式布局都是用html做的，但是具体的图片和文字是什么html并不涉及。html作用是将网页使用代码实现，并且将网页的各个部分添加模块，需要的时候给模块添加颜色和大小等操作。

html是一种静态网页，现在很多网站都是动静结合的，当然html是网页的基础知识，学习前端一定要先学习html，把html基本知识学扎实，然后就可以写出各种静态网页，之后再去学习动态网页。

HTML页面的结构

<!DOCTYPE html>  
<html lang="zh-CN"> 
<head> 
<meta charset="utf-8"> 
<title>网页标题</title> 
<meta name="keywords" content="关键字" /> 
<meta name="description" content="此网页描述" /> 
</head> 
<body> 
网页正文内容
</body> 
</html>

HTML常见标签

html

告知浏览器其自身是一个 HTML 文档。

<html>
    <head>
        <title>我的第一个HTML 页面</title>
    </head>
    <body>
        <p>body元素的内容会显示在浏览器中。</p>
        <p>title元素的内容会显示在浏览器的标题栏中。</p>
    </body>
</html>

效果:

p

规定段落

<p>这是段落。</p>

h1~h6

六个不同的 HTML 标题：

<h1>This heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

<p>请仅仅把标题标签用于标题文本。不要仅仅为了产生粗体文本而使用它们。请使用其它标签或 CSS 代替。</p>

效果:

a

超链接

href="www.bu.com">baidu</a>

效果: 点击可进入百度界面

b

粗体文本

<p>这是普通- <b>这是粗体文本<b>。</p>

效果:

image.png

div

规定一块区域可以对区域同时操作

<h3>his is a header</h3>
<p>T is a paragraph.</p>

<div style="color:#00FF00">
  <h3>This is a header</h3>
  <p>This is a paragraph.</p>
</div>

效果:

font

规定字体的样式

<p><font size="5"lor="red">A paragr.</font></p>

效果:

img

插入图片

<img src="/i/eg_tulip.jpg"  alt="郁金香" />

注意: 图片文件一定要在对应的路径下面哦, 不然图片会显示失败, 下面的视频和声音文件也是一样

效果:

video

插入视频

<video src="./hexi.mp4" controls="controls">
    your browser does not support the video tag
</video>

效果:

image.png

u

<u>下划线</u>

效果:

ol

有序列表

<ol>  
    <li>咖啡</li>  
    <li>牛奶</li>  
    <li>茶</li>
</ol>
<ol start="50">  
    <li>咖啡</li>  
    <li>牛奶</li>  
    <li>茶</li>
</ol>

效果:

ul

无序列表

<ul>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>

效果:

table

用于制作一个表格，可以用width，height规定表格的宽度和长度，border规定表格边框的宽度。

<table border="1">
  <tr>
   <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>Janua/td>
    <td>$100</td>
  </tr>
</table>

效果:

form

有着各种各样的按钮，文本框等统计表一类的组件

<form>
First name:<br>
<input type="text" name="firstname" value="ckey">
<br>
Last name:<br>
<input e="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>

效果:

<form>
    <input type="radio" name="sex" value="male" checked>Male
    <br>
    <input type="radio" name="sex" value="fem">Female
</form>

效果:

注意: 表格与表单的区别

  1. 用处不同：

    a. 表格： 用于按行列方式展示du数据。

    b. 表单：用于搜集不zhi同类型的用户输dao入。

  2. 表现方式不同：表格：HTML 表格由 table 元素以及一个或多个 tr、t td 元素组成。

    a. 表单是一个包含表单元素的区域。

    b. 表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。

很多时候，表单会和表格混合一起使用，效果更佳。

select下拉框

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option valuepel">Opel</opti
  <option value="audi">Audi</option>
</select>

效果:

avatar
文章
阅读
粉丝