前端学习(HTML)

最新推荐文章于 2024-06-15 21:20:00 发布

it张zx

最新推荐文章于 2024-06-15 21:20:00 发布

阅读量132

点赞数

分类专栏： HTML学习文章标签： html javascript

本文链接：https://blog.csdn.net/itzhangzx/article/details/117728382

版权

HTML学习专栏收录该内容

5 篇文章 2 订阅

订阅专栏

超文本编辑语言

基础语法
- 单标签
  1. 无属性标签<标签名/>
  2. 有属性标签<标签名实姓名="属性值“/>
- 双标签
  1. 无属性<标签名/>
  2. 有属性<标签名属性名=“属性值”></标签名>
- 整体结构
  1. <html></html>
  2. <head></head>
  3. <body></body>
  doctype
  - <doctype html>html5的版本声明
  水平线标签
  - <hr>
  - width 宽度 1.百分比 2.px
  - align 对齐方式 left right center(默认)
  - size 水平线粗细

段落与换行

段落标签
1.<p></p>自动换行
常用属性
align 对齐方式
1. left 居中对齐(默认)
2. right 居右对齐
3. center 居中对齐
4. justity 两端对齐
- 换行标签
1. <br><br/>

2.列表

无序列表
1.格式：

	<ol>
		<li></li>
		<li></li> 
	<ol>

2.常用属性：

type:列表图表
square:实心方块
circle:空心圆
disc:实心圆

有序列表
1. 格式:

        <ul>
               <li></li> 
               <li></li> 
        </ul>

2. 常用属性:

       type:列表图表 :
                1    数字符号
                a     小写字母
                A     大写字母
                 i     小写罗马字母
                 I     大写罗马字母

div和span

<div>是一个块级元素，通常与css配合使用，用于布局。
<div>标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。
<div>是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是<div>固有的唯一格式表现。可以通过<div>的class或id应用额外的样式。
<span>标签被用来组合文档中的文档中的行内元素，span没有固定的固定的格式表现。当对它应用样式是，它才会产生视觉上的变化。
<span>content</span>

格式化标签

font 设置字体的相关属性
1. size:字体大小
2. color:字体颜色
3. face:字体风格
pre 定义预格式化的文本，保留文本中的空格和换行
<p> 加粗
<i> 斜体
<u> 下划线
<del> 中划线
<sub> 下标
<sup> 上标

a标签

<a>标签定义超链接，用于从一张页面链接到另一张页面
<a>元素最重要的属性是href属性，它指示要链接的目标位置，同时没有href属性a标签内的内容与普通文本没有区别，也就失去了超链接的功能。
若是想要跳转到当前页面，那么href的值为#。被链接页面通常显示在当前浏览器窗口中，除非您规定了另一个目标(target属性)。

img标签

行内标签，不会自动换行
- 必须属性：
  1. src:被引入图片的地址
- 常用属性：
  1. title 当鼠标悬停在图片上显示的文字
  2. alt 当图片显示失败时加载的文本

表格

<table></table>标签定义HTML表格。
<tr></tr>标签定义表格的行。tr元素包含一个或多个th或td元素
<td></td>标签定义 HTML表格中的标准单元格。
<th></th>定义表格内的表头单元格。th元素内部的文本通常会呈现为居中的粗体文本，而td元素内的文本通常是左对齐的普通文本。
简单的HTML表格由table元素以及一个或多个tr、th、或td元素组成。
理解: table相当于一个表格的外框，tr为行，td为一个一个单元格，th为有标题作用的单元格，th中的内容同时有加粗的效果。
tr常用属性
1. align 每行中文本内容的水平方向对齐方式(left、 right.center)
2. valign 每行中文本内容的垂直方向对齐方式
3. bgcolor 设置行的背景颜色

所有标签都有的属性:

id属性——用来标识元素的唯一性
name属性——提交数据时的参数名
style属性——设置元素的行内样式
class属性——设置属性的样式名

表单

form

表单用于向服务器传输数据。form元素是块级元素，其前后会产生折行。
表单提交时，必须设置表单元素的name属性值，否则无法获取数据。
2. 常用属性

	1. action          提交表单地址
     2. method       提交方式     (不区分大小写)
            - GET     提交   get
            - POST   提交  post
            - get请求与post请求区别（post请求需要服务器
                1. get请求时参数会跟在浏览器地址栏后面，而post请求不会
          （post请求会将数据存放在请求体中）
                3. get请求相对post请求而言，不那么安全
                4. get请求传递的数据长度是有限的，而post请求技术是不限的（长度与服务器有关）
                5. get请求比post请求快（2倍左右）
                6. get请求有缓存（会将数据存放在浏览器本地），而post无缓存
        3. target           提交数据打开窗口的的方式
            - _self         当前窗口
            - _blank       空白新窗口

input标签

    - type：     元素类型 （行内元素）
        1. text               文本框
        2. passwor          密码框
        3. radio               单选框
        4. checkbox        复选框
        5. file                  文件域 
        6. hidden            隐藏域
        7. button            普通按钮
        8. submit            提交表单
        9. reset               重置按钮
        10. date                日期框
        11. disable            禁用标签
    - value            元素的值
    - readonly       只读状态
    - maxlength     最多输入的长度

注意:
1.单选框需要通过name属性设置为一组，复选框需要通过name属性设置为一组
2.如果时上传文件的表单，则表单需要设置一个属性enctype=“multipart/fonm- data”，提交方式为post请求
3.没有name属性无法提交表单！！！！

textarea

该标签定义多行的文本输大控件。文本区中可容纳无限数量的文本，可以通过cols和rows属性来规定textarea的尺寸。
- cols规定文本区内的可见宽度。
- rows规定文本区内的可见行数。

label

<label>标签为input元素定义标注（标记)。
label元素不会呈现任何的特殊效果。
label标签的for属性应当与相关元素的id属性相同，此时点击label标签会自动为元素聚焦

button

在这里插入图片描述

下拉框

select 下拉框标签
- select 常用属性
  - multiple 设置下拉可多选
  - size 设置下拉框架可见选项数
  - disable 禁用元素
option 下拉框选线
- option常用属性
  - selected 默认选中项
  - disable 禁用某个选项
  - value 提交给服务器的选项值
    - 如果设置value的值，则提交的是value的值
    - 如果未设置value的值，则提交option双标签中的值

常用字符实体

在HTML中，某些字符是预留的。
在HTML中不能使用小于号(<）和大于号(>)，这是因为浏览器会误认为它们是标签。
如果希望正确地显示预留字符，我们必须在HTML源代码中使用字符实体(character entities)。实体名称对大小写敏感!
字符实体

标签的分类

HTML中标签元素三种不同类型:块状元素，行内元素，行内块状元素。
块级元素
- 元素都从新的一行开始，并且其后的元素也另起一行;元素的高度、宽度、行高以及顶和底边距都可设置;元素宽度在不设置的情况下，是它本身父容器的100%(和父元素的宽度一致)，除非设定一个宽度。
行内元素
- 和其他元素都在一行上;元素的高度、宽度及顶部和底部边距不可设置;元素的宽度就是它包含的文字或图片的宽度，不可改变。
行内状况元素
- 和其他元素都在一行上;元素的高度、宽度、行高以及顶和底边距都可设置。

it张zx

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习(HTML)

超文本编辑语言基础语法单标签无属性标签<标签名/>有属性标签<标签名实姓名="属性值“/>双标签无属性<标签名/>有属性<标签名属性名=“属性值”></标签名>整体结构<html></html><head></head><body></body>doctype<doctype html>html5的版本声明
复制链接

扫一扫