web前端第一课--HTML

最新推荐文章于 2024-07-18 20:18:47 发布

js25zl19

最新推荐文章于 2024-07-18 20:18:47 发布

阅读量109

点赞数

文章标签： html

本文链接：https://blog.csdn.net/qq_44741877/article/details/109316165

版权

HTML定义:HTML是超文本标记语言
HTML的基本样式`：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>此处写网页标题</title>
</head>
<body>
此处写网页内容
</body>
</html>

【其中：< head lang=“en”> lange=‘en’ 是网页语言类型
< meta charset=“UTF-8”> 浏览器的编码格式】

浏览器的渲染模式：从左到右，从上到下；
HTML元素:
【html元素分为级联元素/行级元素（不换行）和块级元素（换行）】

h1~h6: [块级元素] 由1到6字体逐渐变
p标签：[块级元素]段落标签

<p>段落1</p>
<p>段落2</p>

< br>< /br>：强制换行
< b>< /b>和< strong>< /strong>：[行级元素] 加粗文本
< i>< /i> 和< em>< /em> ：[行级元素]
< sub>< /sub>:下标
< sup>< /sup>：上标
< small>< /small>：[行级元素]
< del>< /del>：[行级元素] 删除线
< a>< /a>:[行级元素]超链接
href="#" 默认跳转当前页面
target="_blank" 重新打开选项卡
href地址有远程的和相对路径，其中相对路径写法是可以直写接路径，也可以使用点来写路径，一个点即向外跳一级。
例1.当前页面的锚标

<a href="#运动">跑步</a>

例2.跨页面的锚标

 <a href="https://www.csdn.net/">li</a>

< img> < /img>标签:[行级元素] 图像标签是用来显示图片的标签
属性：
src="" 当前图片的路径可远程可相对
alt="" 图片加载失败的时候显示的信息
title="" 标题信息
width="" 设置图片的宽
height="" 设置图片的高
align="" 文本对齐

 <img src="./img/hbanner-vmall-mate40p-p.jpg" alt=""/>

列表标签： [块元素]
无序列表：
< ul>
< li>< /li>
< /ul>
有序列表：
< ol>
< li>< /li>
< /ol>
（有序和无序列可以的嵌套使用）

<ul class="nav">人数
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

自定义列表：dl dt dd [ 块级元素]
dl 类似于ul/ol
dt 类似于li
dd 指dt的内容

span:文字标签 [行级元素] 是用来容纳文本的
div:[块级元素] 一种构建网页框架的容器
table表格元素
tr设定行数
th表头项目
tdi表格内容
caption设置表头

 <table border="1">
<tr>
<th>name</th>
<th>age</th>
<th>hobby</th>
</tr>
<tr>
<td>张三</td>
<td>20</td>
<td>读书</td>
</tr>
<tr>
<td>李四</td>
<td>21</td>
<td>运动</td>
</tr>
</table>

name	age	hobby
张三	20	读书
李四	21	运动

form表单
属性：
action="" 当前表单提交的服务器路径；
method="" 表单提交的方式有：
1.get显式提交值拼接在路径的后边，不安全，数据量大；
2.post：隐式提交，比较安全；
表单对象元素
单行文本框：< input type=“text”/> input元素不写type属性默认单行文本框

  <input type="text"/>年龄

属性：
placeholder=“” 智能提示
value="" 当前元素的值
maxlength="" 限制输入的最大长度
name="" 名称属性

<input type="text"/>姓名

普通按钮 button

<button type="reset">按钮</button>

两组input标签按钮

 <input type="reset" value="取消"/>
 <input type="submit" value="注册"/>

单选按钮：
< input type=“radio” value=“xx”/> xx
属性：checked 默认选择；
注：给多选中的选项都命有相同的name就可以进行多选；

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

复选按钮： xx
属性：checked 默认选择

文件资源管理器：
属性： multiple 支持多选

密码框：

 <input type="password"/>密码

下拉菜单：
< select>
< option>< /option>
< option value="">< /option>
< option value="">< /option>
< /select>

<select>
          <option>--请选择--</option>
          <option value="中学毕业">--中学毕业--</option>
          <option value="本科在读">--本科在读--</option>
      </select>选择学历

option标签是select标签的子集 vlaue 为当前项的值
属性: 默认选择： selected
文本域：< textarea >< /textarea>
属性： rows="" 控制行
cols="" 控制列
placeholder=“请输入…” 智能提示

js25zl19

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
web前端第一课--HTML

HTML定义:HTML是超文本标记语言HTML的基本样式`：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <title>此处写网页标题</title></head><body>此处写网页内容</bo
复制链接

扫一扫