html基础

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

╲ゞ可爱的小鱼ゞ╲

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

阅读量234

点赞数

分类专栏：前端 html

本文链接：https://blog.csdn.net/qq_56200957/article/details/117450278

版权

前端同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

html

1 篇文章 0 订阅

订阅专栏

html基础和CSS基础

HTML介绍

HTML介绍

HTML[超文本标记语言]
作用:创建网页并且添加网页内容
HTML标准与历史
1995 HTML广泛使用 HTML1.0 2.0 3.0 4.0 XHTML1.0 HTML5.0
#HTM5与以前版本区别:严格
示例:
HTML4.0 <br> <BR> <Br> <br /> 松散
HTML5.0 <br>
如何书写HTML5.0标准网页
PC端常用浏览器/概念

html骨架结构

<!--声明文档类型，当前网页为HTML5.0标准-->
<!DOCTYPE html>
<html lang='en'>
<!--lang=zh-CN 用于搜索引擎看的-->
<!--头部-->
  <head>
     <!--告诉浏览器编码为utf-8-->
      <meta charset='UTF-8'>
      <!--标题-->
      <title></title>
  </head>
  <!--主体-->
    <body> </body>
</html>

浏览器

常见的五大浏览器：谷歌、火狐、ie、opera、safari
- PC端浏览器: 谷歌chrome;IE;火狐;Safari
- 移动端浏览器: Safari[苹果];chrome[安卓]
浏览器内核：
- 浏览器内核[内核在浏览器内部用于渲染和解析htm;css模块]

浏览器	内核
IE	Trident
Chrome	WebKit
Safari	WebKit[Blink WebKit升级]

软件项目开发二个不同体系:

常用快捷键

tab 补全代码
- 示例 ①: 先写个 script 然后按Tab键
- 示例 ②: 先写个div.class 然后按Tab键
ctrl+c 复制
ctrl+v 粘贴
ctrl+x 剪切/删除剪切之后会自动复制不选中内容则删除或者剪切一行
Alt + ↑ / (↓) 快速上移或下移一行
ctrl+L 快速选中一行
ctrl+f 查找
ctrl+ z 返回上一步
ctrl+ y 返回下一步
ctrl+ tab 切换打开的页面

 ctrl + `  打开集成终端
 ctrl + Shift + `  创建一个新的终端

html

排版标签(了解)

标题标签h1~h6 字体加粗上下生成空白行，h1在一个页面上只能使用一次，多次使用不符合w3c标准，不利于页面搜索引擎seo优化
属性:align 文本水平方向对齐的方式 left;center;right (了解)
h1 ~ h6
段落标签p 上下生成空白行
水平线hr
换行br

    <h1>这是一个网页</h1>
	<h2>这是一个网页</h2>
	<h3>这是一个网页</h3>
	<h4 align='center'>这是一个网页</h4>
	<h5 align='right'>这是一个网页</h5>
	<h6 align='left'>这是一个网页</h6>
	<p>这是第一个段落</p>
	<p>这是第二个段落</p>
	<hr>
	哈喽 <br>我想换行

文本样式标签 (了解)

文本加粗 <b></b> <strong></strong>
斜体 <i></i> <em></em>
删除线 <s></s> <del></del>
下划线 <u></u>
上标 <sup></sup>
下标 <sub></sub>

    <b>加粗</b> <strong>加粗</strong> <br>
	<i>斜体</i> <em>斜体</em> <br>
	<s>删除线</s> <del>删除线</del> <br>
	<u>下划线</u> <br>
	你好<sup>上标</sup> <br>
	你好<sub>下标</sub>

图片标签

src 图片来源
alt 图片不显示的时候显示的文字替换文本
title 提示文本鼠标悬停到图片上显示的文字
width 宽
height 高
border 边框

<img src="./img/3.png" title="鼠标悬停图片上" alt="地址路径错啦" width="100px" height="50px" border="2px" >

超链接

href 跳转目标
target 打开方式
_blank 打开新标签显示新网页,原先标签保存
_self 默认:在当前标签中打开新网页

 <a href="https://www.baidu.com/" target="_blank">百度1</a>
 <a href="https://www.baidu.com/" target="_search">百度2</a>

base

控制页面中所有超链接是以什么方式打开

<base target='_blank'>

锚点

同一个页面

<!--第一种-->>
<!--想测试在中间多加几个br就行啦-->>
<a href='#test'> 测试 </a>
<h3 id='test'> 第一种 </h3>
<!--第二种-->>
<a href='#test'> 测试 </a>
<a id='test'> 第二种 </a>

不同页面

<a href='test.html#test'>测试</a>

<!--另一个页面test.html-->
<h3 id='test'>
    第一
</h3>

常用特殊字符和路径

 小于号：&lt; <
 大于号：&gt; >
 版权：&copy;©
 注册商标：&reg;®
 人民币：&yen;￥
 空格：&nbsp;
 乘号：&times;x
 除号：&divide;÷

注释

ctrl + /
```

```

路径

相对路径:指的是以当前网页为主附近路径
- 兄弟路径 #直接图片名称 src="1.jpg"
- 子目录路径 #先写目录名称再写图片名 src="img/1.jpg"
- 父目录路径 #先写… 父目录/再写图片名 src="../1.jpg"
绝对路径网络绝对路径以http开头路径
- 从盘符出发
  - <img src='E:\black\基础班\第一天\代码\images\1.jpg'>
- 绝对路径网络绝对路径以http开头路径
  - <img src='https://www.baidu.com/'>

div-span-ol-ul-table

div 占一行，span 在一行内显示

 标记 <div> 被<>包裹中间关键词,具备一些功能
 标记分类
     (1)单标记 <关键字>  示例:<br><input type="text">
     (2)双标记 必须成对出现 
               <关键字></关键字>    <form></form> <div></div>
 标签嵌套
     在双标签的内容部分，编写其它标签形成功能叠加
     <div>
       <div>
          <img>
        </div>
     </div>
 注意：
 1:嵌套要有顺序不乱顺  <div> <div></div></div>
 2:嵌套代码要缩进--美观  二个空格
 3:在书写标签中关键字字母小写

 标记中属性和属性值
  可以通过属性和属性值增加标签功能
  (1)通用属性:每个标签都可以使用属性
       id:给标签创建一个唯一标识(编号) #注意:在网页中唯一
       style:给标签添加内联样式        #网页美化
       class:引入样式名                #网页美化
     示例:<div id="box1" ></div>  
          <div class="box2"></div>   
  (2)专用属性:针对某个标签使用属性
      <input type="text" value="">

列表

无序列表：

<!--
	ul连不能直接写文字和标签，ul只能嵌套li
	li外面必须有父元素ul或者ol li里面可以嵌套任意标签
-->
<ul>
    <li>元素</li>
    <li>
    	<p>嵌套</p>
    </li>
</ul>

有序列表

<!--
	ol连不能直接写文字和标签，ol只能嵌套li
	li外面必须有父元素ul或者ol li里面可以嵌套任意标签
-->

<ol>
    <li>新闻</li>
    <li>
    	<p>嵌套</p>
    </li>
</ol>

自定义列表

<dl>
     <dt>自定义列表标题</dt>
	  <dd>HTML 设计网页</dd>
	  <dd>CSS  美化网页</dd>
	  <dd>JavaScript 网页动态效果</dd>
</dl>

ol-ul列表扩展
- 有序列表属性 -简单了解就行

type = " I "	列表项的样式
type = " I "	默认值: 1 2 3 4 5
type=“a” / type=“A”	默认值: a b c d / A B C D
type = " i "	默认值: i ii iii iv
start=" 19 "	列表标识起始项默认值: 从19开始往后
type = " none "	去点

无序列表属性 -简单了解就行

type = " I "	列表项的样式
type = " disc "	实心小黑点
type = " circle"	空心小黑点
type = " square "	实心距形
type = " none "	去掉列表前标记项

表格

<table>
    <!--tr外边必须有父元素table,
    tr里面只能嵌套td和th(表头)，
    td里面可以嵌套任意元素-->
    <tr>
    	<td>单元格</td>
        <td>单元格</td>
        <td>单元格</td>
    </tr>
    <tr>
    	<td>单元格</td>
        <td>单元格</td>
        <td>单元格</td>
    </tr>
</table>

表格属性
- border="1" <代表1像素同<1px> > 边框
- cellpadding="1" 边框与内容之间距离，默认值1
- cellspacing="2" 边框与边框之间距离，默认值2
- width="200px" 表格宽度
- height="200px" 表格高度
- bgcolor="red" 设置表格背景颜色
- 设置表格边框颜色 bordercolor=""
- align=center/left(默认)/right 水平对齐方式
  - 设置在表格上，表格水平对齐方式: 页面居中
  - 设置在tr和td上，里面内容水平对齐方式

<!--table 表示一个表格 tr 表格行 td单元格-->
	  <h2 >员工表</h2>
	  <!--1:创建一个table表示表格-->
	  <!--2:中间添加tr行 td单元格-->
	  <table border="1" width="800" bgcolor="#f5f5f5" bordercolor="red" 
	  cellspacing="0" cellpadding="10" align="center">
	     <tr align="center">
		    <td>编号</td>
			<td>姓名</td>
			<td>性别</td>
		 </tr>
		 <tr align="center">
		    <td>001</td>
            <td>唐三</td>
            <td>男</td>
		 </tr>
		 <tr align="center">
		    <td>002</td>
            <td>小舞</td>
            <td>女</td>
		 </tr>
	  </table>

表格的标题和表头

<table>
    <caption>我是标题</caption>
    <tr>
        <!--里面文字加粗居中-->
    	<th>表头</th>
    </tr>
    <tr>
    	<td>单元格</td>
    </tr>
</table>

结构

表格内部可选标签                   了解
(1)表格标题  <caption>学生表</caption>
(2)行列标题  <th></th>    替换td 出现居中加粗文字
(3)分组      <thead></thead>   表格头
            <tbody></tbody>   表格主体
            <tfooter></tfooter> 表格底部[脚]
#如果表格中没有添加分组标签，浏览器自动添加tbody标签
#将所有tr添加进去
#了解浏览器完成哪些自动操作

<table>
    <!--
	thead tbody 不代表行或者列，是给表格分成2部分，使表格更有序，增强语义化，更好的seo
-->
    <thead>
    	<tr>
        	<th>表头1</th>
            <th>表头2</th>
            <th>表头3</th>
        </tr>
    </thead>
    <tbody>
    	<tr>
        	<td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
    </tbody>
</table>

结构
- colspan 合并列 跨列合并(左右)
  - 向右合并n个单元格(n包含自己单元格)被合并的单元格删除
- rowspan 合并行 跨行合并(上下)
  - 向下合并n个单元格(n包含自动单元格)初合并的单元格删除

<table>
    <tr>
    	<td rowspan='2'>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>2</td>
        <td>3</td>
    </tr>
	<tr>
    	<td colspan='2'>1</td>
        <td>3</td>
    </tr>
</table>

表单

form 表单域 <form></form>
表单域属性
- ① method 表单提交方式
  - GET 默认值不安全发送数据量少(1K) 乱码
  - POST 安全发送数据量多(不限制) 无乱码
  - PUT 修改数据 DELETE 删除
  - 1K 英文字母 1023 汉字几十个
- ②action 保留收集表单中数据程序地址 #通常node.js接口
  - 示例: action="http://127.0.0.1:8080/login"
- ③enctype 附加属性(了解)
  - (1)application/x-www-form-urlencoded 默认值 POST提交
  - (2)text/plain 普通文本(少用)
  - (3)multipart/form-data #上传文件
  - 上传文件:头像(图片);docx;zip;exe...
表单控件(标签)
- input 基础 9种(重点) 新input 10种(了解)
- textarea 多行文本域(重点)
- select 下拉选择框(重点)
- 其它相关控件

input	意思
type=" "	设置控件通用属性
name=" "	设置控件通用名称
value=" "	代表控件的值,会显示在网页上，提交时将其中内容发送服务器程序
disabled	无值属性禁用[不能选中,不能修改]
maxlength	规定输入字段中的字符的最大长度。
minlength	规定输入字段中的字符的最小长度。
readonly	设置属性只读[只能看不能改]
placeholder	规定帮助用户填写输入字段的提示提示占位符。
size	定义输入字段的宽度。

#只有设置的name的属性控件,才能被form提交(重点)

disabled: #手机号注册用户60s之内(不能点击发送)填写验证

type的值可以为：

text / password / submit / reset / radio / button / checkbox / file

文本 / 密码 / 提交按钮 / 重置按钮 / 单选按钮 / 点击按钮 / 复选框 / 文件上传

submit 少用 , 只有放在 form中才具备提交功能

reset 少用 , 重置(清空)按钮,将表单恢复初始状态

button 和 /button #功能与submit相同 #少用

#单选和多选的name属性，除了为控件命名，还有分组的功能

#单选和多选框一定要定义value属性值

#checked 无值属性默认选中

input 基础9种

<h3>表单</h3>
     <form method="get" action="#">
	   账号:
	   <input type="text" name="uname" value="" maxlength="12"  placeholder="请输入用户名"><br>
	   密码:
       <input type="password" name="upwd" value="" maxlength="12" placeholder="请输入密码"><br><br>
	   <input type="submit" value="提交">
	   <input type="reset" value="重置">
	   <button>提交</button>
	   <input type="button" name="btn" value="9" disabled id="btn">
	   <br><br>
	   <!-- 单选框 -->
	   性别
	   男<input type="radio" name="sex" value="男" checked>
	   女<input type="radio" name="sex" value="女"><br><br>
	   <!-- 复选框: -->
	   奥斯卡喜欢美食
	   臭豆腐<input type="checkbox" value="cdf" name="list" checked>
	   榴莲<input type="checkbox" name="list" value="ll">
	 </form>
	 <!-- script中仅示范 type=" button"中的倒计时 -->
	 <script>
	     var btn = document.getElementById("btn") 
		 var time = setInterval(()=>{
		    var v = btn.value;
			v-=1;
			if(v==1){
			  clearInterval(time)
			}
			btn.value = v;
		 },1000)
	 </script>

文本域和下拉选择框

文本域
文件选择框;隐藏域;文本域
文件选择框
- <input type="file" name="">
- #注意事项: 如果type=file
- (1)提交方式一定修改POST method="POST"
- (2)表单域添加属性 enctype="multipart/form-data"
- #以上属性将上传文件(打碎 01010100010101) 上传合并

<form action="#" method="POST" enctype="multipart/form-data">
        <!--文件选择框-->
        <input type="file" name="pic">
     </form>

隐藏域
- <input type="hidden" name="ctime" value="1982172163873">

<!--隐藏域-->
		<input type="hidden" name="ctime" value="19821873287329832">

文本域：多行文本商品评论
- <textarea></textarea>
- 属性:
- cols 设置文本域每行能输入多个少字符
- rows 设置输入多少行
- 示例: <textarea name="data" rows="5" cols="30"></textarea>
- #行列不准确，给用户操作留有空间
- #后期项目中通常不会直接使用文本域富文本域

<!--文本域-->
		<textarea name="data" rows="5" cols="30"></textarea>

下拉选择框 -----用处极多
- 语法: <select name=""> <option></option> </select>
- select下拉列表域 option 下拉列表项
- select属性: size="" 默认选中项1 / multiple 多选
- option属性: value="" 列表项中值 / selected 默认选中
- 不写selected则默认显示第一个

<!--下拉列表-->
	  <select name="p2">
	  	<!--value程序用  文字用户看-->
	  	<option value="0">请选择</option>
	  	<option value="hb">河北省</option>
	  	<option value="hn" selected>河南省</option>
	  	<option value="sd">山东省</option>
	  	<option value="sx">山西省</option>
	  </select>

HTML5 二组小标签

(1)其它相关控件 --------了解
label 在输入框之前作提示效果
- <label for="uname">账号</label>
- <input type="text" value="" name="uname" id="uname">
- 当用户点击账号这两个字字符时 , 光标跳到对应的id for 同名框中
- pc项目方便用户操作

 <fieldset>
	   	<legend>信息</legend>
		<label for="uname">账号：</label>
		<input type="text" name="uname" id="uname" value=""><br>
		<label for="upwd">密码：</label>
		<input type="password" name="upwd" value="" id="upwd">
 </fieldset>

(2)控件分组 ----(了解就行,已经落后 , 不用)
- <fieldset> <legend></legend> <fieldset>
- fieldset：分组 / legend：分组标题

 <fieldset>
	   	<legend>信息</legend>
		这儿写内容
 </fieldset>

(3)浮动框架 -----重点
在一个html页面中嵌入另外一个html网页
- <iframe></iframe>
- 属性:
- frameborder="0" 清除边框
- src="" 其它网站程序地址
- width / height 宽度高度
- scrolling="no" 清除滚动条
- 重点应用范围:如果你网站需要第三方网提供功能，使用iframe直接嵌入当前网页

 <h3>iframe 嵌入其它网页</h3>
	   <iframe  src="https://www.baidu.com/" frameborder="0" width="1000" height="230" scrolling="no">
	   </iframe>

新input10个控件 --------了解 (不稳定)

邮箱： <input type="email"> 验证:必须有@符号前后字符
搜索： <input type="search"> 提供一个清除按钮
url： <input type="url"> 验证http:开头
电话： <input type="tel"> 手机出现数字键盘
数字(!)： <input type="number"> 数字 min max step步长
日历：(临时使用) <input type="date"> 日历
月份： <input type="month"> 一年中第几个月
星期： <input type="week"> 一年中第几周
范围： <input type="range"> 滑动块
颜色： <input type="color"> 颜色选择框
注意:项目加急时可以使用 , 仅限于应急用 , 之后必须改好项目

<form method="POST" action="#">
		   <fieldset>
		    <legend><h3>新控件</h3></legend>
	     邮箱
		 <input type="email" name="myemail" value=""><br>
		 搜索
		 <input type="search" name="mysearch" value=""><br>
		 网址
		 <input type="url" name="myurl" value=""><br>
		 电话
		 <input type="tel" name="mytel" value=""><br>
		 商品数量
		 <input type="number" name="myc" value="" min="1" max="99" step="1"><br>
		 日历
		 <input type="date" name="mydate" value="">
		 一年中第几个月
		 <input type="month" name="mymonth" value="">
		 一年中第几周
		 <input type="week" name="myweek" value=""><br>
		 滑动块
		 <input type="range" name="myrange" value=""><br>
		 颜色选择框
		 <input type="color"  name="mycolor" value=""><br>
		 <input type="submit" value="注册">
		 </fieldset>
	   </form>

╲ゞ可爱的小鱼ゞ╲

关注

0
点赞
踩
1

收藏

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

html基础和CSS基础HTML介绍常用快捷键htmlHTML介绍HTML[超文本标记语言]作用:创建网页并且添加网页内容HTML标准与历史1995 HTML广泛使用 HTML1.0 2.0 3.0 4.0 XHTML1.0 HTML5.0#HTM5与以前版本区别:严格示例:HTML4.0 <br> <BR> <Br> <br /> 松散HTML5.0 <br>如何书写HTML5.0标准网页PC端常用浏览器/概念htm
复制链接

扫一扫

专栏目录