HTML基础

最新推荐文章于 2023-03-06 17:15:50 发布

略-略-略

最新推荐文章于 2023-03-06 17:15:50 发布

阅读量376

点赞数

分类专栏： Web基础

本文链接：https://blog.csdn.net/GF__marry/article/details/100511819

版权

Web基础专栏收录该内容

7 篇文章 3 订阅

订阅专栏

web基础包括：HTML、CSS、JavaScript（JS）

HTML（超文本标记语言）

HTML分版本，H5即HTML的第5个版本

HTML的基本结构

<html>
    <head>

    </head>
    <body>

    </body>
</html>

HTML的语法

html的标签不区分大小写，一般使用小写
html中的标签一般成对出现，分为开始标签和结束标签
- <body></body>，其中<body>叫开始标签，</body>叫结束标签，也叫闭合标签
- <br>可以不写结束标签
在开始标签内可以增加标签的属性
- <body id="mybody"> 其中id为属性名，“mybody”为属性值，多个属性之间使用空格隔开。
标签可以写成单标签
- <hr/> 等效于<hr></hr>

基本标签

标题标签：

<h1>标题的内容</h1> 数字可以取值1~6，数字越小，标题字越大
<p>段落的内容</p>
<br>换行标签
<hr>水平线

字体样式：

<font>文字样式，属性如下
size 字号1~7
color 文字颜色
<strong>字体加粗
<em>字体斜体
<b>粗体
<i>斜体
<u>下划线
<sup>上标
<sub>下标
<del>文字上带横线
<small> 文字字号变小一点
<big> 文字字号变大一点

图像标签：

<img src="" alt="" title="" width="" height="" />
src的表示图片的URL路径
alt表示图片的代替文字
title鼠标悬停在图片上显示的文字

超链接标签

<a href="链接到的路径" target="打开目标窗口的位置">显示的文字</a>
href 链接到路径，可以是本项目中的某个页面，也可以是外部资源
target
_blank 在新窗口中打开链接
_self 在本窗口中打开（不写target的话默认属性）
_parent在上一级框架中打开
_top 在整个浏览器窗口中打开
<a>标签内部可以嵌套<img>标签形成一个图片超链接
锚点链接
1、定义一个<a>标签在锚点的位置，如：<a href="#" name="top"></a>
2、在页面中需要跳转的位置再写一个<a>标签，如：<a href="#top">回到顶部</a>

预设格式化文本

<pre>标签
通常会保留空格和换行，文本也是等宽的，常见于页面上显示代码。

字符实体

语法有三部分:开头是&，中间是字符的名字，结尾是分号

居中标签

<center></center>让中间的内容在父容器中居中

body标签

页面显示的主要元素和内容都包含在body中
body的属性
background 设置背景
bgcolor页面背景色
text 设置文字颜色

head标签

<title>页面标题</title>页面的标题，显示在浏览器的标签页中
<script>添加script脚本
<style>添加css样式
<meta>
<meta charset="UTF-8">使用charset属性指定字符集
<meta name="keywords" content="html 超文本标记语言"> 提供给搜索引擎的关键字
<link> 引入外部文件，比如外部样式表

列表

有序列表<ol>
列表中的每一项是有序号的，常用于区分步骤的项的罗列，默认是数字
列表项<li>
常用属性：
type 指定列表项前面的序号是数字，还是罗马数字，还是英文字母
取值：1 a A i I后面两个为小写和大写的罗马数字
start 序号起始值，只能是数字
无序列表<ul>
列表项是无序的
列表项 <li>
type设置属性 disc 实心圆(默认)，square 方形 circle空心圆
定义列表<dl>
每一项有两部分组成，一部分是定义（声明）罗列一个概念<dt>，另一部分是定义（声明）的内容
列表之前可以相互嵌套

表格<table>

<caption>表的标题
<thead>表头
<th>放在表头中的单元格，字体是黑色加粗
<tbody>表身
<tfoot>表尾
<tr> 一行
<td> 一行中的一个单元格
表格常用属性：
border 表格边框的宽度，单位为px
bordercolor 边框的颜色
表格边框的合并CSS样式 style="border-collapse:collapse" 或表格属性：cellspacing="0px"
单元格的合并
横向合并
使用td中的colspan属性，取值为数字，将横向的及格单元格合在一起
纵向合并
使用td中的rowspan属性，取值为数字，将纵向的单元格合并在一起
表单
用于采集用户信息，页面与用户进行交互。
表单中可以嵌套不同类型的元素，称为表单元素
<form>表单
实现前端页面和后台交互的主要方式，用户一般通过form表单提交信息给后台进行处理
主要属性：
method 设置HTTP的请求方法，常用的有get和post，post用于携带的数据需要保密或数据量较大，在url中不显示参数
name 表单的名字
action 表单提交到的目的URL
enctype 表单的数据种类，如果需要上传文件，此处应设为multipart/form-data
常用的表单元素
<lable>标签用于文字的显示
<input>标签
用法：<input type="类型" name="xxx" value="xxx" />
其中type的值指定该标签表现为什么类型的表单元素
name 表示该标签的名
value 表示该表单元素的值，对于submit与reset等表示按钮上显示的文字
checked 表示表单元素的选中状态，适用于单选和复选框
maxlength 能输入字符的最大个数，使用于文本框和密码框
文本框 type="text"
密码框 type="password" 用户输入的内容会以圆点或星号显示
单选按钮 type="radio" 一组单选按钮中，要实现互斥效果，需要同一组单选按钮的name值相同
复选框 type="checkbox" 一组复选框的name值要相同，方便后台的处理
按钮
提交按钮 type="submit" 点击会向action的URL提交整个form表单的信息元素
重置按钮 type="reset" 点击时，整个表单中的表单元素会恢复到缺省值（初始状态）
普通按钮 type="button" 需要额外实现点击事件
隐藏域
type="hidden" 不再页面显示，但可以被提交的表单元素
文件输入域
type="file" 用于上传文件，此表单的method必须指定为post，enctype="multipart/form-data"
<select>下拉列表
<select name="xxx">
<option value="value1">选项1</option>
<option value="value2">选项2</option>
<option value="value3">选项3</option>
</select>
<textarea>文本域
用于接收用户的多行文本输入
<textarea rows="5" cols="20" />
表示5行，每行20个字符
表单元素的只读元素readonly，可以获取焦点，但不能输入，但是值可以提交
disabled属性，不能获取焦点，不能输入，值不可以提交
域容器<fieldset>
将一组域放到一起
<legend>设置域的标题

略-略-略

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML基础

web基础包括：HTML、CSS、JavaScript（JS）HTML（超文本标记语言）HTML分版本，H5即HTML的第5个版本HTML的基本结构<html> <head> </head> <body> </body></html>HTML的语法html的标签不...
复制链接

扫一扫