html基础篇

shix .

于 2024-07-13 16:15:21 发布

阅读量304

点赞数 13

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

本文链接：https://blog.csdn.net/2302_80729149/article/details/140401673

版权

html 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

基础结构

<!DOCTYPE html><!--每个文件都要加上这个，是html文件的主题-->
<html><!--查不多就是c预言的main函数，从头括到尾部-->
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <title>html教程</title>
    </head>
    <body>
        <h1>这是一个标题</h1>
            <a href="定义一个超链接">基础教程超链接</a>
            <img src="C:\Users\侯卓林\Desktop\图片\2.jpg" width="258" height="400">
            <body>
                <p>这是一个段落</p><!--p是段落标签-->>
                <br><!--//br标签只有一个，是换行标签-->
                
                <table border="1">
                    <tr><!--这两句是表格框架-->
                        <td>基础教程</td><!--每个框架一个td标签-->
                        <td>基础教程</td>
                        <td>基础教程</td>
                    </tr>
                </table>
            </body><!--代码主题写在body里边-->

            </body>
</html>

1.需要注意的是：html文件里的注释用的是这个格式<！–注释内容-- >

html结构标签	功能
<.h1><./h1>	标题
<.p><./p>	段落
<.body><./body>	包含文档主体
<.html><./html>	包含整个html文档
<.a href=“”><./a>	超链接
<.hr><./hr>	分隔，水平线
<.br>	简单文字内容换行

html文本格式化标签	描述
<.b>	粗体
<.em>	着重文字
<.i>	斜体字
<.small>	小号子
<.strong>	加重语气（粗体）
<.sub>	定义下标字
<.sup>	定义上标字
<.ins>	插入字（下划线）
<.del>	删除字

链接

<a herf="https://">访问示例网站</a><!--直接链接网站-->

<a href="https://www.example.com">
	<img src="example.jpg" alt="示例图片"><!--将链接创建在图片上-->
</a>

<a href="document.pdf" download>下载文档</a><!--这个链接可以直接下载文件-->

<!--target属性可以定义被链接的文档在何处显示-->
<a href="https://www" target="_blank" rel="noopener noreferrer">访问菜鸟教程</a>
<!--这个链接可以再新窗口打开文档-->

<!--另外解释一个ID属性-->
<a id="tips">这个id是隐藏的</a>

如何使用css

css是为了更好的渲染html元素而引入的

CSS 可以通过以下方式添加到HTML中:

内联样式- 在HTML元素中使用"style" 属性
内部样式表 -在HTML文档头部区域使用

内联样式

一般来说，我们是在外部引用css文件，但当特殊的样式需要应用到个别元素时，就可以使用内联样式：在相关的标签中使用样式属性，比如：改变段落的颜色和左外边距<p style="color:blue;margin-left:20px;">这是一个段落。<p>

设置背景颜色

<bodystyle="background-color:yellow;">
                    <h2 style="background-color: aqua;">这是一个段落海贼王
                    </h2>
                </bodystyle></body>

html样式实例-字体，字体颜色，字体大小

我们可以使用font-family（字体），color（颜色），和font-size（字体大小）属性来定义字体的样式:

<h1 style="font-family:verdana;">一个标题</h1>
<p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>

文本对齐方式

<h1 style="text-align:center;">
    居中对齐的标题
</h1>

内部样式表

当单个文件需要特别样式时，就可以使用内部样式表。你可以在部分通过

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
    body {background-color:yellow;}
    p {color:blue;}</style>
    <title>2.11</title>
</head>
<body>
    <p>这是一个段落。</p>
</body>
</html>

外部样式表

通过更改一个文件来更改整个站点的外观

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

html样式标签

标签	描述
<.style>	定义文本样式
<.link>	定义资源引用地址

html图像标签

标签	描述
<.img>	定义图像
<.map>	定义图像地图
<.area>	定义图像地图中的可点击区域

HTML 表格标签

标签
<.table>	定义表格
<.th>	定义表格的表头
<.tr>	定义表格的行
<.td>	定义表格单元
<.caption>	定义表格标题
<.colgroup>	定义表格列的组
<.col>	定义用于表格列的属性
<.thread>	定义表格的页眉
<.tbody>	定义表格的主体
<.tfoot>	定义表格的页脚

HTML 列表标签

标签	描述
<.ol>	定义有序列表
<.ul>	定义无序列表
<.li>	定义列表项
<.dl>	定义列表
<.dt>	自定义列表项目
<.dd>	定义自定列表项的描述

HTML 分组标签

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

HTML布局

大多数网站会把内容安排到多个列中（就像杂志或报纸那样）。

大多数网站可以使用

或者元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。

div的id部分用于识别布局，例如

例如，这是一个html代码

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
 
<div id="container" style="width:500px">
 
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">主要的网页标题</h1></div>
 
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript</div>
 
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
内容在这里</div>
 
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
版权 © runoob.com</div>
 
</div>
 
</body>
</html>

HTML表单和输入

HTML 表单用于收集用户的输入信息。

HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。

HTML 表单通常包含各种输入字段、复选框、单选按钮、下拉列表等元素。

以下是一个简单的HTML表单的例子：

<form action="/" method="post">
    <!-- 文本输入框 -->
    <label for="name">用户名:</label>
    <input type="text" id="name" name="name" required>

    <br>

    <!-- 密码输入框 -->
    <label for="password">密码:</label>
    <input type="password" id="password" name="password" required>

    <br>

    <!-- 单选按钮 -->
    <label>性别:</label>
    <input type="radio" id="male" name="gender" value="male" checked>
    <label for="male">男</label>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">女</label>

    <br>

    <!-- 复选框 -->
    <input type="checkbox" id="subscribe" name="subscribe" checked>
    <label for="subscribe">订阅推送信息</label>

    <br>

    <!-- 下拉列表 -->
    <label for="country">国家:</label>
    <select id="country" name="country">
        <option value="cn">CN</option>
        <option value="usa">USA</option>
        <option value="uk">UK</option>
    </select>

    <br>

    <!-- 提交按钮 -->
    <input type="submit" value="提交">
</form>

其中，提交按钮表单的内容会被传送到服务器，表单的动作属性 action 定义了服务端的文件名。action 属性会对接收到的用户输入数据进行相关的处理:

代码如下：

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

这里的method属性一共有两个：post和get

post：指的是 HTTP POST 方法，表单数据会包含在表单体内然后发送给服务器，用于提交敏感数据，如用户名与密码等。
get：默认值，指的是 HTTP GET 方法，表单数据会附加在 action 属性的 URL 中，并以 **?**作为分隔符，一般用于不敏感信息，如分页等。例如：https://www.runoob.com/?page=1，这里的 page=1 就是 get 方法提交的数据。

例如：

<!-- 以下表单使用 GET 请求发送数据到当前的 URL，method 默认位 GET。 -->
<form>
  <label>Name:
    <input name="submitted-name" autocomplete="name">
  </label>
  <button>Save</button>
</form>

<!-- 以下表单使用 POST 请求发送数据到当前的 URL。 -->
<form method="post">
  <label>Name:
    <input name="submitted-name" autocomplete="name">
  </label>
  <button>Save</button>
</form>

<!-- 表单使用 fieldset, legend, 和 label 标签 -->
<form method="post">
  <fieldset>
    <legend>Title</legend>
    <label><input type="radio" name="radio"> Select me</label>
  </fieldset>
</form>

html5关于表单输入标签

标签	描述
<.from>	定义供用户输入的表单
<.input>	定义输入域
<.textarea>	定义文本域 (一个多行的输入控件)
<.label>	定义了元素的标签，一般为输入标题
<.fieldset>	定义了一组相关的表单元素，并使用外框包含起来
<.legend>	定义了元素的标题
<.select>	定义了下拉选项列表
<.optgroup>	定义选项组
<.option>	定义下拉列表中的选项
<.button>	定义一个点击按钮
<.datalist>	指定一个预先定义的输入控件选项列表
<.keygen>	定义了表单的密钥对生成器字段
<.output>	定义一个计算结果

HTML框架

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面(在一个窗口中显示多个网页链接)

iframe语法：

<该URL指向不同的网页。

同时iframe也可以设置标签的高度和宽度

定义是否移除边框：

显示一个目标链接的页面

RUNOOB.COM<//a>

html颜色

各种颜色名称：https://www.runoob.com/html/html-colornames.html

html颜色值

html脚本

Javascript使html页面具有更强的动态和交互性

html


## html<noscript>标签

<noscript> 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。

<noscript>元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。

只有在浏览器不支持脚本或者禁用脚本时，才会显示 <noscript> 元素中的内容：

~~~html
<script>
document.write("Hello World!")
</script>
<noscript>抱歉，你的浏览器不支持 JavaScript!</noscript>

html脚本标签

标签	描述
<.script>	定义了客户端脚本
<.noscript>	定义了不支持脚本浏览器输出的文本

html字符实体

html中的预留字符被替换为字符实体

一些在键盘上找不到的字符也可以使用字符实体来替换

html实体

在html中某些字符是预留的。

在html中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。

如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。字符实体类似这样：&entity_name,&#entity_number如需要显示小于号，我们必须这样写：&lt/&#60/&#060使用实体名而不是数字的好处是，名称易于记忆。不过坏处是，浏览器也许并不支持所有实体名称（对实体数字的支持却很好）。

不间断空格

HTML 中的常用字符实体是不间断空格( )。

浏览器总是会截短 HTML 页面中的空格。如果您在文本中写 10 个空格，在显示该页面之前，浏览器会删除它们中的 9 个。如需在页面中增加空格的数量，您需要使用字符实体。&nbsp

结合音标符

发音符号是加到字母上的一个"glyph(字形)"。

一些变音符号, 如尖音符 ( ̀) 和抑音符 ( ́) 。

变音符号可以出现字母的上面和下面，或者字母里面，或者两个字母间。

变音符号可以与字母、数字字符的组合来使用。

以下是一些实例:

音标符	字符	Construct	输出结果
̀	a	à	à
́	a	á	á
̂	a	â	â
̃	a	ã	ã
̀	O	Ò	Ò
́	O	Ó	Ó
̂	O	Ô	Ô
̃	O	Õ	Õ

html字符实体

！实体名称对大小写敏感

显示结果	描述	实体名称	实体编号
	空格
<	小于号	<	<
>	大于号	>	>
&	和号	&	&
"	引号	"	"
’	撇号	' (IE不支持)	'
￠	分	¢	¢
£	镑	£	£
¥	人民币/日元	¥	¥
€	欧元	€	€
§	小节	§	§
©	版权	©	©
®	注册商标	®	®
™	商标	™	™
×	乘号	×	×
÷	除号	÷	÷

html URL

URL 是一个网页地址。

URL可以由字母组成，如"runoob.com"，或互联网协议（IP）地址： 192.68.20.50。大多数人进入网站使用网站域名来访问，因为名字比数字更容易记住

URL的语法规则：

scheme://host.domain:port/path/filename

说明:

scheme - 定义因特网服务的类型。最常见的类型是 http
host - 定义域主机（http 的默认主机是 www）
domain - 定义因特网域名，比如 runoob.com
:port - 定义主机上的端口号（http 的默认端口号是 80）
path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
filename - 定义文档/资源的名称

常见的URL scheme

Scheme	访问	用于…
http	超文本传输协议	以 http:// 开头的普通网页。不加密。
https	安全超文本传输协议	安全网页，加密所有信息交换。
ftp	文件传输协议	用于将文件下载或上传至网站。
file		您计算机上的文件。

##URL字符编码

URL 只能使用 ASCII 字符集.

来通过因特网进行发送。由于 URL 常常会包含 ASCII 集合之外的字符，URL 必须转换为有效的 ASCII 格式。

URL 编码使用 “%” 其后跟随两位的十六进制数来替换非 ASCII 字符。

URL 不能包含空格。URL 编码通常使用 + 来替换空格。

URL 编码实例

字符	URL 编码
€	%80
£	%A3
©	%A9
®	%AE
À	%C0
Á	%C1
Â	%C2
Ã	%C3
Ä	%C4
Å	%C5

如需完整的 URL 编码参考，请访问我们的 URL 编码参考手册。

一些html的基本格式速查文档

https://www.runoob.com/html/html-quicklist.html

html所有标签列表https://www.runoob.com/tags/html-reference.html

了解xhtml

如何将html转化为xhtml

添加一个 XHTML <!DOCTYPE> 到你的网页中
添加 xmlns 属性添加到每个页面的html元素中。
改变所有的元素为小写
关闭所有的空元素
修改所有的属性名称为小写
所有属性值添加引号

shix .

关注

13
点赞
踩
18

收藏

觉得还不错? 一键收藏
打赏
0
评论
html基础篇

如果您在文本中写 10 个空格，在显示该页面之前，浏览器会删除它们中的 9 个。如需在页面中增加空格的数量，您需要使用字符实体。由于 URL 常常会包含 ASCII 集合之外的字符，URL 必须转换为有效的 ASCII 格式。，但当特殊的样式需要应用到个别元素时，就可以使用内联样式：在相关的标签中使用样式属性，比如：改变段落的颜色和左外边距。HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。其中，提交按钮表单的内容会被传送到服务器，表单的动作属性。
复制链接

扫一扫