HTML

最新推荐文章于 2024-07-16 15:26:34 发布

90后的张先森

最新推荐文章于 2024-07-16 15:26:34 发布

阅读量152

点赞数

分类专栏：笔记文章标签： html

本文链接：https://blog.csdn.net/qq_41925122/article/details/106797690

版权

笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML学习

HTML

什么是 HTML？
HTML 是用来描述网页的一种语言。即超文本标记语言 (Hyper Text Markup Language)HTML 使用标记标签来描述网页，其功能是对网页结构化的处理，将网页元素整理分类，使内容更清晰，更有逻辑

HTML骨架格式

<HTML>
	<head>
		<title></title>
	</head>
	<body>
	</body>
</HTML>

HTML标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

标签、元素

由尖括号包围，比如<title>
通常是成对出现的

标签1

标题 h1 ~ h6 双标签
段落 p 双标签
段内换行 br 单标签
预留格式 pre 单标签保留空格和空行，适合显示计算机代码
段内分组 span 双标签组合行内元素，以便通过CSS样式来格式化
水平线 hr 单标签
注释内容

<!-- 注释 -->

标签2

超链接 a

< a herf ="网址" >文字或图片</a>

标签3

图像格式

插入图像

<img src="/i/eg_cute.gif" width="128" height="128" />

请注意，插入动画图像的语法与插入普通图像的语法没有区别

绝对路径和相对路径

路径描述

<img src="picture.jpg">

picture.jpg 位于与当前网页相同的文件夹

<img src="images/picture.jpg">

picture.jpg 位于当前文件夹的 images 文件夹中

<img src="/images/picture.jpg">

picture.jpg 当前站点根目录的 images 文件夹中

<img src="../picture.jpg">

picture.jpg 位于当前文件夹的上一级文件夹中

标签4

列表 ul ol li

无序列表 ul

<html>

<body>

<h4>一个无序列表：</h4>
<ul>
  <li>HTML</li>
  <li>css</li>
  <li>js</li>
</ul>

</body>
</html>

有序列表

<!DOCTYPE html>
<html>
<body>
<ol start="50">
  <li>HTML</li>
  <li>css</li>
  <li>js</li>
</ol>
 
</body>
</html>

区域 div

HTML <div>元素是块级元素，它是可用于组合其他 HTML 元素的容器。

<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。

如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。

<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

表格 table tr td

<html>

<body>

<p>每个表格由 table 标签开始。</p>
<p>每个表格行由 tr 标签开始。</p>
<p>每个表格数据由 td 标签开始。</p>

<h4>一列：</h4>
<table border="1">
<tr>
  <td>100</td>
</tr>
</table>

<h4>一行三列：</h4>
<table border="1">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
</table>

<h4>两行三列：</h4>
<table border="1">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>

</body>
</html>

标签5

`<form>` 元素

HTML 表单用于收集用户输入。

<form> 元素定义 HTML 表单：

<form>
 .
form elements
 .
</form>

文本框密码框input

<!DOCTYPE html>
<html>
<body>

<form>
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>

<p>请注意表单本身是不可见的。</p>

<p>同时请注意文本字段的默认宽度是 20 个字符。</p>

</body>
</html>

提交按钮

<input type="submit"> 定义用于向表单处理程序（form-handler）提交表单的按钮。

表单处理程序通常是包含用来处理输入数据的脚本的服务器页面。

表单处理程序在表单的 action 属性中指定

单选按钮输入

<input type="radio"> 定义单选按钮。

单选按钮允许用户在有限数量的选项中选择其中之一

元素（下拉列表）

<form action="/demo/demo_form.asp">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br><br>
<input type="submit">

`<textarea>` 元素定义多行输入字段（文本域）：

<textarea name="message" rows="10" cols="30">
输入文本
</textarea>

`<button>` 元素定义可点击的按钮：

<button type="button" οnclick="alert('Hello World!')">Click Me!</button>

`<input type="radio">` 定义单选按钮

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

`<input type="checkbox">` 定义复选框

<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<br>
<input type="checkbox" name="vehicle" value="Car">I have a car 
</form>

90后的张先森

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML

HTML学习历程毕业后在找工作，本科物联网工程，涉及的方向很多，最后还是决定学习前端。而前端最基础的部分莫过于HTML，CSS,和JS（JavaScript）了,编辑器选择了sublime text3HTML初识什么是 HTML？HTML 是用来描述网页的一种语言。即超文本标记语言 (Hyper Text Markup Language)HTML 使用标记标签来描述网页，其功能是对网页结构化的处理，将网页元素整理分类，使内容更清晰，更有逻辑HTML骨架格式<HTML> <he
复制链接

扫一扫