HTML超文本标记语言

最新推荐文章于 2023-06-21 18:50:22 发布

妖x月

最新推荐文章于 2023-06-21 18:50:22 发布

阅读量1.2k

点赞数 1

本文链接：https://blog.csdn.net/qq_42349627/article/details/97623118

版权

1.Web前端开发介绍
这里介绍一些wed开发技术：
在这里插入图片描述
Web起源：
1984年蒂姆伯纳斯李创造了世界上第一个万维网导航站点世界上第一个网站

Web的特点：

1.易导航和图形化界面
2.与平台无关
3.分布式结构
4.动态性
5.交互性

Web工作原理，这里只讲最简单最基本的，实际上的原理远比这个复杂
在这里插入图片描述
URL统一资源定位器可以理解为网址。
构成如下：
协议类型：//服务器地址（端口号）/路径/文件名
例子：
http://www.westos.org/bbs/index.html

2.HTML网页结构

HTML(Hyper Text Mark-up Language )即是超文本标记语言, 通过使用标记标签来描述页面文档结构和表现
形式的一种语言，再由浏览器进行解析，然后把结果展示在网页上。
超文本指的是超链接
标记指的是标签

1).HTML文件用编辑器打开显示的是文本，可以用文本的方式编辑.
2). HTML文件用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。

HTML基本结构
在这里插入图片描述
HTML文档类型：目前常用的两种文档类型是xhtml 1.0和html5

HTML文档规范与注释

xhtml制定了文档的编写规范，html5可部分遵守，也可全部遵守，看开发要求。 
1、所有的标签必须小写
 2、所有的属性必须用双引号括起来 
3、所有标签必须闭合 
4、img必须要加alt属性(对图片的描述)

html文档代码中可以插入注释，注释是对代码的说明和解释，注释的内容不会显示在页面上，html代码中插入注释
的方法是：
	 <!-- 这是一段注释 -->

3.HTML标签
这里只是举出一些常用标签
1.标题标签
在这里插入图片描述
2.文本标签

<i>...</i> 斜体
<em>...</em>  强调斜体
<b>...</b> 加粗
<u>...</u> 字体加下划线
<tt>...</tt> 居中显示
<strong>...</strong> 强调加粗	
<cite>...</cite> 作品的标题(引用)
<sub>...</sub> 下标    <sup>...</ sup> 上标
<del>...</del> 字体加删除线
<s>...</s> 字体加删除线

3.换行标签

<br/> 换行
<p>...</p> 换段
<hr/>水平分割线

4.列表标签

<ul>...</ul> 无序列表
<ol>...</ol> 有序列表，其中type类型值：A，a，i，1。start属性表示起始值
<li>...</li> 列表项
<dl>...</dl> 自定义列表
<dt>...</dt> 自定义列表头
<dd>...</dd> 自定义列表内容

在这里插入图片描述

5.div与span标签
块级元素里的内容占一整行，行内元素占一行中的部分，不会把这一行占满

<div>...</div> 常用于组合块级元素，以便于通过css来对这些元素格式化
<span>...</span>常用于包含的文本，你可以使用css对它定义样式，或者使用JavaScript对它进行操作

6.图片标签img

<img> 标签定义 HTML 页面中的图像。有两个必需的属性：src 和 alt。
属性：src: 图片名及url地址		title：文字提示属性（就是在你把鼠标放到图片上后会出现的提示文字）
     alt: 图片加载失败时的提示信息	width/height：	图片宽度/高度

有了图片标签我们点击图片后就会跳转到指定的网页去

7.超链接标签

<a href=" ">...</a> 超级链接标签
属性：
	href: 必须，指的是链接跳转地址;
	target: 表示链接的打开方式。
		_blank  新窗口 , 
		_self   本窗口（默认） 
	title：文字提示属性

在中间省略处就写你想写的文字，做好之后点击这个文字就可以跳转到指定网页。

锚点链接：
    1. 定义一个锚点：
	<a id="a1"></a> 百度一下 <a name="a1"></a>
    2. 使用锚点：    
	<a href="#a1">跳到a1处</a>

效果：点击下面其中的一个就会到达这个内容处，不用手动往下翻，像个目录
在这里插入图片描述

8.表格标签
在 HTML 文档中,广泛使用表格来存放网页上的文本和图像;
在这里插入图片描述

标签:
表格标签:table
行标签:tr
单元格(表示列的概念):td
表头:th :加粗并且居中
表格标题:caption

标签合并:
      行合并:rowspan
      列合并:colspan
标签常用属性:
border:边框
width:宽度
height:高度
algin:对齐方式
	center,left,right

可以实现如下表格：
在这里插入图片描述
9.表单标签

用表单标签就可以做上图功能

常用属性：
    action属性:提交的目标地址(URL)
    method属性:提交方式:get(默认)和post
    get方式:
		URL地址栏可见
		长度受限制
		相对不安全.
    post方式:
		URL地址不可见
		长度不受限制
		相对安全.

表单项标签input定义输入字段，用户可在其中输入数据。
在 HTML 5 中，type 属性有很多新的值。

type属性:表示表单项的类型:值如下:
        text:单行文本框
        password:密码输入框
        checkbox:多选框 注意要提供value值
        radio:单选框   注意要提供value值
        file:文件上传选择框
        button:普通按钮 
        submit:提交按钮
        image:图片提交按钮
        reset:重置按钮, 还原到开始(第一次打开时)的效果
        hidden:主表单隐藏域,要是和表单一块提交的信息,但是不需要用户修改

        email 用于应该包含 e-mail 地址的输入域
        url 用于应该包含 URL 地址的输入域
        number 用于应该包含数值的输入域。
            max    规定允许的最大值
            min    规定允许的最小值
            step 规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等）
            value 规定默认值
        range 用于应该包含一定范围内数字值的输入域，显示为滑动条
            max    规定允许的最大值
            min    规定允许的最小值
            step 规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等）
            value 规定默认值
        日期选择器 Date pickers    
            date - 选取日、月、年
            month - 选取月、年
            week - 选取周和年
            time - 选取时间（小时和分钟）
            datetime - 选取时间、日、月、年（UTC 时间）
            datetime-local - 选取时间、日、月、年（本地时间）

10.下拉列表标签

<select>...</select> 标签创建下拉列表。    name属性:定义名称,用于存储下拉值的
    size：定义菜单中可见项目的数目，html5不支持
    disabled 当该属性为 true 时，会禁用该菜单。 
    multiple 多选
<option>... </option>  下拉选择项标签,用于嵌入到<select>标签中使用的;
        *value属性:下拉项的值
        *selected属性:默认下拉指定项.

11.文本域标签

<textarea>...</textarea> 多行的文本输入区域
    name :定义名称,用于存储文本区域中的值。
    cols ：规定文本区内可见的列数。
    rows ：规定文本区内可见的行数。
    disabled： 是否禁用
    readonly： 只读

12.按钮标签

<button>...</button> 标签定义按钮。
<fieldset> --fieldset 元素可将表单内的相关元素分组。

在这里插入图片描述
例：

<body>
请选择你的出生地：
<select name="biradd">
<option value="">---请选择---</option>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="chongqing">重庆</option>
</select><br>

*********留言板**********<br>
<form aution"发送地址"="" method="post">
<textarea cols="30" rows="10">请在这里输入...</textarea><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="submit" value="提交">
<input type="reset" value="重置"><br>
</form><br>

********请选择你要上传的文件*******<br>
<input type="file" name="myfile">

</body>

在这里插入图片描述
form表单案例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form</title>
</head>
<body>
<form action="#" method="get">
    用户名：<input type="text" name="username"><br>
    密码：<input type="password" name="password"><br>
    爱好：<input type="checkbox" name="hobby" value="0">看动漫
    <input type="checkbox" name="hobby" value="1">看电影
    <input type="checkbox" name="hobby" value="2">玩游戏
    <br>
    性别：
    <input type="radio" name="gender" value="1">男
    <input type="radio" name="gender" value="2">女
    <br>
    出生日期：
    <input type="date" name="birth"><br>
    <input type="submit" value="登录">
    <input align="center" type="reset" value="重置">

</form>
</body>
</html>

结果显示：
在这里插入图片描述

妖x月

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML超文本标记语言

1.Web前端开发介绍这里介绍一些wed开发技术：Web起源：1984年蒂姆伯纳斯李创造了世界上第一个万维网导航站点世界上第一个网站Web的特点：1.易导航和图形化界面2.与平台无关3.分布式结构4.动态性5.交互性Web工作原理，这里只讲最简单最基本的，实际上的原理远比这个复杂URL统一资源定位器可以理解为网址。构成如下：协议类型：//服务器地址（端口号）/路径...
复制链接

扫一扫