HTML

CarryBircks

于 2021-03-11 21:20:24 发布

阅读量140

点赞数 1

分类专栏： html+css+js 文章标签： html

本文链接：https://blog.csdn.net/qq_45958469/article/details/114678391

版权

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

3 篇文章 0 订阅

订阅专栏

HTML基本应用

大佬驾临！！！😘 请赐教。
不喜欢理论可直接阅读入门级案例快速上手！
不断完善中······

1 - 概述

HTML（Hyper Text Markup Language）:
- 超文本标记语言有流媒体、图片、声音的存在
HTML继承了XML` 语法结构 :
- 以什么名字标签开始，再以这个名字标签结尾
约束：HTML 就是以 dtd 约束
- 约束标签的名字、个数、位置、子标签名字、个数位置…

2 - 基本样式

<html>
    <head> <!--头部元素容器-->
        <title>文档的标题</title>
    </head>
    <body>
        <!--文档的内容-->
    </body>
</html>

3 - 基本标签

标签	描述
`<html> </html>`	定义HTML文档
`<body> </body>`	定义文档主体
`<a>`	链接
`<pre>`	块级标签（标签内容就是展现的内容）
`<p>`	定义段落（省略了多余的空格和换行）

功能型：

标签	描述
`<h1>--<h6>`	标题标签
`<hr />`	水平线
`<br />`	换行
`<em>`	斜体
`<strong>`	加粗
`<sub>`	下标
`<sup>`	上标
`<!--注释-->`	注释

<html>
    <head></head>
    <body>
    	<!--这是注释-->
    	<p>换行：</p>
    		<br/>
    	<p>水平线：</p>
    		<hr/>
    	<h1>这是标题</h1>
    	<p>
    		<em>这是斜体</em>
    		<br/>
    		<strong>这是粗体</strong>
    		<br/>
    		水（化学式）：H<sub>2</sub>O
            <br/>
    		10的平方：10<sup>2</sup>
    	</p>
    </body>
</html>

浏览器显示：
常用实体字符（转义字符）：
- 格式：AND符号（&） + 实体名 +分号（;）

表示方法	含义
` `	空格
`&It`;	>
`>`	<
`&`	&

<html>
    <head></head>
	<body>
        <!--实体字符-->
		<p>空格：&nbsp;END</p>
		<p>左括号：&lt;</p>
		<p>右括号：&gt;</p>
		<p>AND符号：&amp;</p>
	</body>

</html>

浏览器显示：

4 - 链接(`<a>`)

4 - 1 定义

链接：也称超级链接，是指从一个网页指向一个目标的连接关系
用<a>标签在 HTML中创建链接

属性值值作用
href 链接地址
target _blank 在新页面打开链接
title 超链接文字注释鼠标悬停在超链接上的时候，显示该超链接的文字注释

属性	值	值作用
`href`	链接地址
`target`	`_blank`	在新页面打开链接
`title`	超链接文字注释	鼠标悬停在超链接上的时候，显示该超链接的文字注释

4 - 2 路径

绝对路径：一般以 协议盘符站点名称 开始
相对路径:
- ./ 本目录默认路径
- ../ 上一级目录
- ../../上一级目录的上一级目录
- / 根目录

<a href="./one.html" target="_blank">跳转到one.html</a>   <!--正常跳转-->

<a href="../one.html" target="_blank">跳转到one.html</a>  <!--跳转失败-->

4 - 3 href、target 属性（规定链接的目标）

href：链接
target：打开方式
- _blank ：新页面打开
- _self ：当前页面打开（默认）

案例：

<html>
	<body>
       
		<a href="http://www.baidu.com" target="_blank">百度</a>
       
		<!--如果把链接的 target 属性设置为 "_blank"("_self")，
			该链接会在新窗口(当前窗口)中打开。-->
       	</body>

</html>

浏览器显示：百度

4 - 4 name 属性（规定`锚(anchor)`的名称）

<a name="top"/> <!--要跳转到的位置-->

<a href="one.html"#top>回到顶部</a> <!--跳转链接-->

4 - 5 图像

alt ：无法载入图像时，替换文本属性告诉读者她们失去的信息
src (source) ：图像的 URL 地址
width , height ：图片大小

<img alt=“无法加载" src="V:\Java\YX2019\HTML\mode\OIP.jpg" width="128" height="128"/>

<!--在图片上添加链接-->
<html>
    <head></head>
    <body>
        <a href="http://www.baidu.com" target="_bleak">
            <!--点击图片跳转-->
            <img alt="无法加载" src="V:\Java\YX2019\HTML\mode\OIP.jpg" />
        </a>
    </body>
</html>

4 - 6 表格

标签	描述
`<table>`	表格
`<th>`（table head）	表头
`<td>`（table data）， `<tr>`	行，列

<table>标签：
- cellpadding 属性：单元格内边距
- cellspacing 属性：单元格边框的宽度
- 空单元格：
  - 如果table设置了border，那个空单元格的border不显示，
    
    可以通过在空单元格中添加 <p> </p>来解决
<th> 标签：
- <th rowspan="2" >单元格跨两行</th>
- <th colspan="2" >单元格跨两列</th>

<h4>两行三列：</h4>
<table border="1">
<th>id</th>
 <th>name</th>
 <th>age</th>
	<tr>
		 <td>100</td>
		 <td>ZhangSan</td>
		 <td>20</td>
	</tr>
	<tr>
		<td>110</td>
		<td>LiSi</td>
		<td>19</td>
	</tr>
</table>

浏览器显示：

4 - 7 列表（可嵌套使用）

无序列表（<uI>）

<ul>
       <li>太阳</li>
       <li>月亮</li>
       <li>星星</li>
       <li>地球</li>
</ul>

浏览器显示：

有序列表（<oI>）

 <ol>
        <li>太阳</li>
        <li>月亮</li>
        <li>地球</li>
 </ol>

浏览器显示：

5 - 表单

5 - 1 定义

表单：专门用来收集数据并提交给服务器

5 - 2 表单可以提交数据到服务器

提交到动态资源（cgi）----> 可以解析提交的数据
- 动态资源：动态数据（可执行的代码）
提交到静态资源 ----> 不能解析提交的数据
- 静态资源：静态的数据 html jpg

5 - 3 action属性、method属性

action属性：提交表单时转到的URL地址
method属性：
- GET方式：提交的数据在url地址上
- POST方式：提交的数据不在url地址上，其实是通过浏览器提交数据

5 - 4 文本输入框（`input`）

type 属性
- type="text"
value 属性（可填可不填）
- 文本框中的值（不写时，可在文本框中自己输入）
name 属性（必填）
- 提交表单时此文本框的值value存储在name变量中
助解：类似于Java中的name = value

恭喜你进修完毕，欢迎前往更广阔的天空