HTML 基础

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

方长很方

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

阅读量84

点赞数

本文链接：https://blog.csdn.net/AB__C/article/details/108672541

版权

HTML

概念： 最基础的网页开发语言

 Hyper Text Markup Language 超文本标签语言
 超文本：用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本
 标记语言：由标签构成的语言，标签语言不是编程语言

1. 语法

html文档后缀名：.html 或 .htm
标签分为
- 围堵标签：有开始标签和结束标签，如 < html> < /html>
- 自闭和标签：开始标签和结束标签在一起，如 < br/>
- 在开始标签中可以定义属性，属性由键值对构成，值需要用引号（单双都行）引起来
- html的标签不区分大小写，但是建议使用小写
标签可以嵌套

<html>

	<head>
		<title> title </title>
	</head>

	<body>
		<font color = 'red'>Hello word</font>
	</body>

</html>

2. 标签

分类：

文件标签：构成html最基本的标签
- html：html文档的根标签
- head：头标签，用于指定html文档的一些属性，引入外部的资源
- title：标题标签
- body：定义文档的主体
- 声明不是一个 HTML 标签；它是用来告知 Web 浏览器页面使用了哪种 HTML 版本。
文本标签：和文本有关的标签
- < h1> to < h6>：标题标签，控制字号的大小；
- < p>：段落标签，将段落分开，结束标签< /p>;
- < br>：换行，可以写成< br/>；
- < hr>：显示一条水平线，可以设置颜色color，长度width，宽度size，对齐方式align(left左对齐，right右对齐，center居中)，html5不支持；
- < b>：字体加粗；
- < i>：字体斜体；
- < font>：字体标签，颜色color，大小size，字体face；
- 属性定义：
  - color：英文单词、rgb（值1，值2，值3）值的范围0-255 红绿蓝的配比、#值1值2值3 值的范围：00-FF
  - width：数值单位默认px（像素）、数值% 占比相对于父元素的比例
- 注释：< !-- 内容 -->
图片标签
< img> src图片位置、align对齐方式、alt图片显示失败替换的文字、width图片宽度、height图片高度
相对路径：以.开头的路径，./代表当前目录、. ./代表上一级目录

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> title </title>
</head>
<body>
    <img src="../.idea/123.jpg" alt = "无">
</body>
</html>

列表标签
有序列表ol、无序列表ul，可选列表样式type

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> title </title>
</head>
<body>
<!-- 有序列表 ol -->
早上起来干的事
<ol>
    <li> 洗漱 </li>
    <li> 吃早饭 </li>
    <li> 上学 </li>
</ol>
<!-- 无序列表 ul -->
<ul>
<!-- 可选样式type = "disc" "square" "circle" -->
    <li> 洗漱 </li>
    <li> 吃早饭 </li>
    <li> 上学 </li>
</ul>

</body>
</html>

链接标签
a：定义一个超链接
+ href：指定访问资源的URL
+ target：打开资源的方式，_self在本页面跳转，_blank打开一个新页面跳转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> title </title>
</head>
<body>
<a href="列表标签.html" target="_blank"> 点我打开列表标签 </a>
<br>
<a href="列表标签.html" target="_self"> 点我打开列表标签 </a>
</body>
</html>

块标签：
span，默认文本信息在一行表示，行内标签
div：每一个div占满一整行，块级标签
语义化标签： html5中为了提高程序的可读性，提供了一些标签，例如header、footer等。
表格标签
table定义表格，tr定义行，td定义单元格，th定义表头单元格；
table中的属性：border是否拥有边框，width表格宽度，cellpadding单元边沿与其内容之间的空白，cellspacing单元格之前的空白，bgcolor背景色，align对齐方式等
tr中的属性：bgcolor、align等
td中的属性：rowspan竖着合并单元格，colspan横着合并单元格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> title </title>
</head>
    <table border = 1 width="50%" cellpadding="10" cellspacing="0">
        <caption><b>信息表</b></caption>
        <thead>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
        <tr>
            <td>1</td>
            <td>小明</td>
            <td>5</td>
        </tr>
        <tr>
            <td>2</td>
            <td>小红</td>
            <td>6</td>
        </tr>
        </tbody>
    </table>
</body>
</html>

caption：表格标题
thead表头、tbody体部分、tfoot脚部分，增强代码可读性

表单标签

概念： 用于采集用户输入的数据的，用于和服务器进行交互。

标签form： 可以定义一个范围，范围代表采集用户数据的范围

form的属性：

action：指定提交数据的URL
method：指定提交的方式，一共七种，get、post等
- get：请求参数会在地址栏中显示，请求参数的长度有限制，不太安全
- post：请求参数不会在地址栏中显示，会封装在请求体中，请求参数的长度无限制，较为安全

表单项标签

input：可以通过type属性值改变元素展示的样式
- type属性：
  - text：文本输入框，默认值
    - placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息
  - password：密码输入框
  - radio：单选框
  1. 要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样；
  2. 一般会给每一个单选框提供value属性，指定其被选中后提交的值;
  3. checked属性可以指定默认值
  - checkbox：复选框
  1. 一般会给每一个单选框提供value属性，指定其被选中后提交的值;
  2. checked属性可以指定默认值
  - file：文件选择框
  - hidden：隐藏域，用于提交一些信息
  - 按钮：
    - submit：提交按钮，可以提交表单
    - button：普通按钮
    - image：图片提交按钮，可以使用src属性指定图片的路径
  - label：指定输入项的文字描述信息，label的for属性一般会和input的id属性值对应，如果对应了，点击label区域，会让input输入框获取焦点。
  - color：取色器
  - date：定义date控件（包括年月日，不包括时间）
  - datetime：定义date和time控件（包括年月日时分秒，基于UTC时区）
  - datetime-local：定义date和time控件（包括年月日时分秒，不带时区）
  - email：定义用于e-mail地址的字段
  - number：控制数字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> title </title>
</head>
<body>
    <form action="#" method="get">
        <label for="username"> 用户名 </label>：<input type="text" name="username" placeholder="请输入用户名" id="username" /> <br>
      	密码：<input type="password" name = "password" placeholder="请输入密码"> <br>
        性别：<input type="radio" name = "gender" value="male"> 男
             <input type="radio" name = "gender" value="female"> 女 <br>
        爱好：<input type="checkbox" name = "hobby" value="eat"> 吃
             <input type="checkbox" name = "hobby" value="drink"> 喝
             <input type="checkbox" name = "hobby" value="play"> 玩
             <input type="checkbox" name = "hobby" value="happy"> 乐 <br>
        图片：<input type="file" name="file"> <br>
        隐藏域：<input type="hidden" name="id" value="aaa"> <br>
        取色器：<input type="color" name="color"> <br>
        生日：<input type="date" name="birthday"> <br>
        日期：<input type="datetime-local" name="birthday"> <br>
        邮箱：<input type="email" name="email"> <br>
        年龄：<input type="number" name="age"> <br>

        <input type="submit" value="登录">
        <input type="button" value="一个按钮">
        <input type="image" src="../.idea/123.jpg">
    </form>
</body>
</html>

select：下拉列表
- option：列表项，selected默认选择该项
textarea：文本域
- cols：指定列数，即一行有多少个字符
- rows：默认多少行，若超过会自动扩容

...
        省份：
        <select name="province">
            <option>-请选择-</option>
            <option>陕西</option>
            <option>重庆</option>
        </select> <br>
        自我描述：
        <textarea cols="20" rows="5"></textarea>
...

方长很方

关注

0
点赞
踩
0

收藏

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

HTML概念：最基础的网页开发语言 Hyper Text Markup Language 超文本标签语言超文本：用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本标记语言：由标签构成的语言，标签语言不是编程语言1. 语法：html文档后缀名：.html 或 .htm标签分为围堵标签：有开始标签和结束标签，如 < html> < /html>自闭和标签：开始标签和结束标签在一起，如 < br/>在开始标签中可以定义属性，属性由键值对
复制链接

扫一扫