HTML基础

玩一圈

于 2024-07-30 16:27:16 发布

阅读量986

点赞数 17

文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/sixudhjj/article/details/140766432

版权

一、HTML概述

HTML指的是超文本标记语言(Hyper Text Markup Language)

超文本:是指页面内可以包含图片、链接、声音,视频等内容

标记:标签(通过标记符号来告诉浏览器网页内容该如何显示)

浏览器通过不同的HTML标签，解析成我们看到的网页

二、HTML基础语法

声明

html4的文档声明

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

html5的文档声明

<!DOCTYPE html>

如果不声明解析网页时会产生一些不可预期的行为，所以我们应该避免出现。

Head标签(标签)包含了所有的头部标签标签。

头部区域的标签标签为: <title>, <style>, <meta>, <link>, <script>

<title>标签可定义网页的标题

频度的描述和关键词。

标题处添加图标

基本结构

一个html的基本结构如下：

<!DOCTYPE html> 声明为 HTML5 文档

<html> 元素是 HTML 页面的根元素

<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。

<title> 元素描述了文档的标题

<body> 元素包含了可见的页面内容

<h1> 元素定义一个大标题

<p> 元素定义一个段落

标签属性

标签属性：标签可以拥有属性。属性进一步说明了该标签的显示或使用特性。如：<body text=”red”>

1.属性的格式：属性名 = “属性值“

2. 属性的位置： <标签名属性名 = “属性值“ >xxx</标签名>

3. 添加多个属性： <标签名属性名 = “属性值“ 属性名 = “属性值“ >xxx </标签名>

三、基本常用标签

标题标签<h1></h1>…..<h6></h6>

属性align设置标题的水平位置(left center right)

段落标签 <p></p>

换行标签 <br/>

列表

无序列表<ul><li></li></ul> ul->unordered list li->list item

有序列表<ol><li></li></ol> ol->ordered list

超链接<a></a>

<a href=“http://www.baiduc.om(定义链接地址)” target=“_blank(打开链接文档的位置)”>百度</a>

<a href=“login.html” target =“_blank”>登录</a>

target:默认值为_self

href(Hypertext reference)超文本引用规定链接指向的页面的URL(页面地址)

URL(Uniform Resourse Locator) 统一资源定位符

图像标签<img/>

<img>属性有src width height border

图片的宽高一般不建议使用

特殊符号转义

在HTML中预留了一些字符。这些预留字符是不能在网页中直接使用的。

比如< 和 >,我们不能直接在页面中使用< 和 >号，因为浏览器会将它解析为html签。

例如：<b> 会被解析为b标签，空格，再多的空格都会当一个空格处理。

为了可以使用这些预留字符，我们必须在html中使用字符转义。

小于号 < 版权(C) © ©

大于号 > 商标(TM) ™ ™

空格   注册商标(R) ® ®

四、表格

表格的基本组成标签

table标签:表格标签

tr标签:表格中的行

th标签:表格的表头

td标签:表格的单元格

表格的基本结构：

<table>定义表格

<tr>定义表行

<th>定义表头</th>

</tr>

<tr>

<td>定义单元格</td>

</tr>

</table>

表格属性：

width height cellspacing cellpadding align valign cospan rowspan

其中cellspacing属性用来表示单元格与单元格之间的外边距，cellpadding用来表示表格内边距(内容到边框的距离)，valign(vertical align)表示垂直水平位置其中有top，middle，bottom，cospan(column span)表示列的合并，rowspan表示行的合并

五、表单

form标签:表单

网页表单中有许多可以输入或选择的组件,用户可以在表单中填写信息,最终提交表单,把客户端数据提交至服务器.

对：

<form action = “http://www.sohu.com” method="post"> ... </form>

input标签：

文本:

<input type="text" name = "username" value="张三" readonly ="readonly" placeholder="请输入" disabled="disabled" />

密码框：

<input type="password" name="password" value="123456"/>

单选按钮：

<input type="radio" name="gender" value="男" checked="checked" />

<input type="radio" name="gender" value="女" />

复选框：

<input type="checkbox" name="course" value="java"/> java

<input type="checkbox" name="course" value="c"/> c

<input type="checkbox" name="course" value="sql"/> sql

<input type="checkbox" name="course" value="html"/> html

文件选择框：

<input type="file" name="file" value="img" />

按钮：

<input type="button" name="button" value="普通按钮" />

提交按钮：

<input type="submit" name="submit" value"提交" />

重置按钮：

<input type="reset" name="reset" value="重置" />

以上所有都是input标签的一种，其中name属性是用来指定该输入控件的名称，通常在表单提交时与其对应的值一起发送到后端，value是用来设置输入的默认值

select标签:

<select name="province">

<option>请选择</option>

<option value="100">山西</option>

<option value="101" selected="selected">陕西</option>

<option value="102">河南</option>

</select>