HTML概述

最新推荐文章于 2023-03-29 10:06:26 发布

The Flying pig

最新推荐文章于 2023-03-29 10:06:26 发布

阅读量144

点赞数

文章标签： html

本文链接：https://blog.csdn.net/qq_45866503/article/details/109107365

版权

HTML概述

HTML是什么？

HTML 是指超文本标记语言（HyperText Markup Language）。

超文本：文本（文字）网页上显示的内容（图片，链接，视频，音频…）

标记：标签标记信息

HTML可以做什么？

网页开发

HTML基本语法

使用开发工具HbuilderX创建一个项目

项目里应该有的目录：js,css,img,index.html

Html文件基本构架：

<!DOCTYPE html>声明html语言版本  是html5   告诉浏览器
<html>
    <head>
        <meta>
        <title></title>
        <link />
    </head>
    <body>
    </body>
</html>

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

Head标签包含了所有的头部标签

可以添加在头部的标签为：

<title>,<style>,<meta>,<link>,<script>,<base>

<title>标签可以定义网页的标题
<mate>标签提供有关页面的元信息（mate-information）,比如针对搜索引擎和更新频度的描述和关键词
<mate>标签位于文档的头部

标题可以定义网页的标题

标题处添加图标
```
<link rel="icon" href="ico地址">
```
Html注释

常用标签

标题标签

<h1></h1>......<h6></h6>   标签会独自占一行

段落标签

<p></p>    标签会独自占一行   段落与段落之间有间隔

换行标签
```
<br/>
```
列表
- 有序列表 ol li
- 无序列表 ul li

超链接

<a href=""   target=""></a>
target:_self(默认)在当前窗口打开新文档
      :_blank在新窗口打开新文档
      :#锚点名称

定义锚点

<a name=""></a>  name属性值可以自定义

图片标签

<img/>
    border  边框
    src="图片地址"
    width和height,设置宽和高
    title    鼠标移动到标签上    提示信息
    alt="图片不能正常显示时  提示信息"

表格标签

表格基本构成：

table:表格区域
border:边框
width & height
bgcolar & background
cellpadding:内容到边框的距离(填充)
cellspacing:单元表格与单元表格之间的距离（间距）
align="center":控制表格在本行中的水平位置
tr:定义表格行
    height
    bgcolor
    background
    align="center" 让本行所有单元内容居中
    valign   设置内容的垂直位置   top   middle bottom
td:表格的单元格
    width & bgcolor
    background
    align="center"
    valign   设置内容的垂直位置   top    middle bottom
th:表头，也是单元格，内容加粗居中显示
<caption>学生信息表</caption>表格标题
注意：表格中的内容都必须写在单元格中

示例

<table border="1" width="300" height="200" cellpadding="0" align="center">
    <caption>学生信息表</caption>
    <tr height="100">
        <th width="100">姓名</th>
        <th>性别</th>
        <th>年龄</th>
    </tr>
    <tr align="center">
        <td>张三</td>
        <td>男</td>
        <td align="right">23</td>
    </tr>
    <tr valign="bottom">
        <td valign="top" align="center">张三</td>
        <td>男</td>
        <td>23</td>
    </tr>
    <tr>
        <td>张三</td>
        <td>男</td>
        <td>23</td>
    </tr>
</table>

单元格合并

<!--
	colspan="合并的数量"    记得删除多余的单元格
	rowspan="合并的数量"    跨多行操作
-->
<table bordle="1" width="500" height="300">
    <tr>
        <td colspan="5"></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td rowspan="3"></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

表单

表单：就是从客户端可以向服务器端发送数据的，表单中有许多可以输入或者选择的组件，用户可以在表单中输入信息，从而向服务器发送。

form标签表示一个表单，不显示
action=“向服务器发送的地址”
method=“向服务器发送数据方式” get/post

表单组件：

input

type=“text” 单行文本输入

id:值要求唯一，自定义值

name:属性名可以重复，自定义值，向服务器端发送数据的键

value:提交的值

class:属性名可以重复，自定义值

size=“30” 列数

placeholder=“请输入账号” 提示信息，当输入内容后自动消失

readonly=“readonly” 只读

disable=“disabled” 禁用组件，一旦组件被禁用了，值旧不会向服务器提交

type=“password” 密码框

type=“file” 文件选择 accept=".png.jpg"过滤文件

type=“radio” 单选框

name相同为一组，一组之内只能选中一个

选择性组件，需要给默认值

表单提交时，只会提交选中的那一个

checked=“checked” 默认选中

示例

<form action=""method="get">
    <label for="accounntld">账号</label>
    <input type="text" id="account" name="account" value="123" size="30"placeholder="请输入账号"/><br/>
    
    密码：<input type="password" name="password"/><br/>
    附件：<input type="file" name="file" accept=".png,.ipg"/><br/>
    
    性别：<input type="radio" name="sex" value="男" id="manid"/><label for="manid">男</label>
         <input type="radio" name="sex" value="女" checked="checked" id="womanid"/>女<br/>
    
    课程：<input type="checkbox" name="course" value="java" checked="checked"/>java
         <input type="checkbox" name="course" value="c"/>c
         <input type="checkbox" name="course" value="html"/>html
         <input type="chockbox" name="course" value="css"/>css
</form>

下拉框

基本语法

<select name="bmon">
    <option value="">省份选择</option>
    <option value="100">山西</option>
    <option value="101" selected="selected">陕西</option>
    <option value="102">河南</option>
</select>

下拉框的name，id,事件等需要在select中定义，而value需要在option中定义

多行文本区域基本语法

<textarea name="taxtarea" cols="40" rows="6">
    文本域中的内容
</textarea>

按钮的基本用法

<input type="rest"(按钮类型) name="Reset"(按钮名称) value="重填">
<input type="reset" value="充填">    重置表单内容
<input type="submit" value="提交">    提交表单内容到服务器
<input type="buttom" value="按钮">    普通按钮没有功能，只能被点击i出发事件作用

内联框架

<iframe src=# name=# width=# heiight=# frameborder=#></iframe>

The Flying pig

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML概述

HTML概述HTML是什么？HTML 是指超文本标记语言（HyperText Markup Language）。超文本：文本（文字）网页上显示的内容（图片，链接，视频，音频…）标记：标签标记信息HTML可以做什么？网页开发HTML基本语法使用开发工具HbuilderX创建一个项目项目里应该有的目录：js,css,img,index.htmlHtml文件基本构架：<!DOCTYPE html>声明html
复制链接

扫一扫