HTML基础

今天也要努力呀.

已于 2022-09-23 15:14:39 修改

阅读量213

点赞数

分类专栏：前端学习文章标签： html 前端

于 2022-09-23 15:13:58 首次发布

本文链接：https://blog.csdn.net/qq_42452973/article/details/127009282

版权

前端学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta>
<title></title>
</head>

<body>
<h1>
<p>
</body>
</html>

基础

标题h1~h6
段落p

链接a–href–target

<a href="http://">
target属性:定义被链接的文档在哪显示
target=“_blank”//新窗口显示
id属性：用于书签，用户不可见

图像`

没有闭合标签
src
alt属性：可替换的文字
height（高度）与 width（宽度）属性用于设置图像的高度与宽度。
<map>: 图像地图
<area>:图像地图中的可点击区域
<area shape="rect" coords="x1,y1,x2,y2" href=url>
矩形：(左上角顶点坐标为(x1,y1)，右下角顶点坐标为(x2,y2))

水平线：<hr>
换行：<br>（没有结束标签）

属性：

值在双引号里面
通用属性：
class （一个或多个类名）
id （唯一）
style（行内样式 inline style）
title

一些标签

文本格式化标签
字体加粗<b>
着重文字<em>
斜体：<i>
小号字体：<small>
加重语气：<strong>
下标：<sub>
上标：<sup>
插入字：<ins>
删除字：<del>
定义缩写：<abbr>
定义地址：<address>
定义文字方向：<bdo>
定义引用:<cite>

头部元素

<head>
<title>
<base href="http://" target="_blank"> html文档中所有链接的默认链接
<link rel="stylesheet" type="text/css" href="mystyle.css" >链接到样式表
<style type=""text/css> 样式文件引用地址,也可以直接添加样式来渲染 HTML 文档
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript"> 
<script>定义脚本文件

css样式

内联样式：使用html的style属性

<p style="color:blue;margin-left:20px;">这是一个段落。</p>

内联样式表：在HTML文档头部区域使用

<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

外部引用：使用外部 CSS 文件

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

link和import
link 属于 XHTML 标签，而 @import 完全是 CSS 提供的一种方式。
link：同时加载 import：页面加载完再加载

表格

tr是table row的缩写（表格中的一行）
th是table header的缩写（表格中的表头）
td是table data的缩写（表格中的一个单元格）

<table> <tr>:行 <td>：每行被分成的单元格（td：table data 单元格的内容）
border：边框属性
<th>:表头 <**caption>**标题
合并单元格：<colspan> 跨两列（横着） <rowspan>跨两行（竖着）<cellpadding> 单元格边距
<thead><tbody>`

<h1>两行两列</h1>
<table border="1">
	<caption>标题</caption>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

列表

ul: unordered list
li: list item
ol: ordered list
dl: definition list
dt: definition term
dd: definition description自定义列表描述

**无序列表 ul-li **

<ul>
	<li></li>
</ul>

**有序列表 ol-li **

<ol>
	<li></li>
</ol>

自定义列表 dl dt dd

<dl>
	<dt></dt>
	<dd></dd>
</dl>

区块 div span

区块元素：<h1>, <p>, <ul>, <table>
内联元素： <b>, <td>, <a>, <img>

<div> 定义了文档的区域，块级 (block-level)
<span> 用来组合文档中的行内元素，内联元素(inline)

表单form

表单元素：文本域（textarea）、下拉列表（select）、单选框（radio-buttons）、复选框（checkbox）
文本：<input type="text">
密码：<input type="password">
单选按钮： <input type="radio">
复选框： <input type=“checkbox” value="bike">
提交：<input type="submit" value="Submit">

框架

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。
<iframe> 定义一个内联的iframe
frameborder 属性用于定义iframe表示是否显示边框。
设置属性值为 “0” 移除iframe的边框:
height 和 width 属性用来定义iframe标签的高度与宽度。