HTML知识点总结

最新推荐文章于 2023-09-04 22:45:24 发布

反方向的发

最新推荐文章于 2023-09-04 22:45:24 发布

阅读量411

点赞数 1

分类专栏： html 文章标签： html5 前端 html

本文链接：https://blog.youkuaiyun.com/Gaoler7/article/details/123216225

版权

html 专栏收录该内容

17 篇文章

订阅专栏

五大浏览器

chrome 谷歌
firefox 火狐
ie
opera 欧朋
safari 苹果

html是什么？

HyperText Markup Language 超文本标记语言，在浏览器里运行

标记标签

双标记标签
       <标签名>内容</标签名>
   单标记标签
       <标签名>

html文档基本结构

<!DOCTYPE html>
<html>
   <head>
       <title>网页标题</title>
       <meta charset="utf-8">

   </head>
   <body></body>
</html>

段落标签

<p>内容</p>
块元素内不可再加块元素

图片标签

<img src="路径“ alt="加载失败” width="宽度“ height="高度" title="鼠标挪到图片所显示文本">
   src 图片引入路径
       1.当html文件与图片在同一个目录下,
src="./1.jpg"
       2.当html文件与图片所在文件夹在同一个目录下，src="./文件夹/2.jpg"
       3.当html文件所在文件夹与图片在同一个目录下，
src=".当前所在文件夹.图片所在文件夹/3.jpg"
       4.当html文件所在文件夹与图片所在文件夹在同一目录下， src="../img/4.jpg"
   alt 当图片加载失败时，用来替代图片的文本
   width 宽度
   height 高度
   title 鼠标放到标签上的提醒文本

标题标签

换行<br> 常用于段落内部换行

水平线

<hr width=" align=“” color="">
   width 宽度
   align 水平方向的对齐方式
       center 水平居中对齐
       left 居左对齐
       right 居右对齐
   color 修改水平线颜色

列表

无序列表
       <ul>
<li>列表项</li>
<li>列表项 </li>
</ul>
   有序列表
       <ol>
<li>列表</li>
<li>列表</li>
</ol>

行内元素

加粗
       <b>内容</b>
<strong>内容</strong>强调
   倾斜
       <i>内容</i>
<em>内容</em>
强调
   上下标
       上标
<sup>内容</sup>

       下标
<sub>内容</sub>
   小号字体
       <samll>内容</samll>

超链接

<a href="" target=""> 超链接</a>
   href 引入跳转页面的路径
       1.网址
       2.相对路径
       3.锚链接
#id值
   target=“_blank” 在新窗口中打开链接

行内框架

表格

基本结构
<table>
<tr>
<th> 表格标题</th>
<td>单元格</td>
</tr>
</table>

   table的属性
       border 边框
       cellspacing 单元格与单元格之间的距离
       cellpadding 内容与单元格间距离
       bordercolor 边框颜色
       bgcolor 背景颜色
       align 水平方向对齐
           left 左
           center 中
           right 右
       rules 规定内测边框是否可见
           none 无边框
           rows 位于行内侧边框
           cols 位于列内侧边框可见
           all 位于行与列内侧边框均可见

表单

表示采集数据范围
<from action=" method=">
</from>
       actiom 数据提交的地址
       method 数据提交的方式
           get
           post
   <input type="" name="" value=""
placeholder="" maxlength="">
       type类型
           text
<input type=""> 文本输入框
           password
<input type="password">密码框
           submit
<input type="submit" value="提交">提交按钮
           reset
<input type="reset" value="重置">重置按钮
           button
<input type="button" value=“按钮”>一般按钮
           image
<input type="image" src="图片路径" alt="">
图片按钮
           checkbox
<input type="checkbox">复选框
           radio
<input type="radio">单选框
           file
<input type="file"> 文件上传框
       name 名称
       value 初始值
       placeholder 输入框里的提醒文本
       maxlenqth 输入框里的字符个数的限制
   文本域
<textarea name="" id="" cols="30" rows="10"></textarea> 文本域
   下拉选择框

<select name="" id="">
<option value="值"></option>
<option value="值" selecter>选项</option>
</select>

       给option添加selected 可以默认选中
   按钮
       <button>按钮</button>
       <button type="submit">提交按钮</button>
       <button type="reset">重置按钮</button>

元素分类

块元素
<p>...</p> 段落

<ul>...</ul> 无序列表

<ol>...</ol> 有序列表

<form></form>
<hr>
<div>...</div>
行内元素
display:inline
<span>...</span>

<br> 换行

<b>...</b> 加粗

<strong>...</strong> 加粗

<img > 图片

<sup>...</sup> 上标

<sub>...</sub> 下标

<i>...</i> 斜体

<em>...</em> 斜体

<u>...</u> 下划线
<a href="">,</a>
<label></label>
<small></small>
   行内块元素
display: inline-block
       <img > 图片
       <iframe src=""></iframe>
       <input type="">
       <textarea></textarea>
       <select></select>
       <button></button>