HTML day1

最新推荐文章于 2023-05-11 20:39:37 发布

信代码，得永生

最新推荐文章于 2023-05-11 20:39:37 发布

阅读量121

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/qq_23979811/article/details/104968210

版权

HTML 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1、网页构成

静态页面：结构HTML 和样式CSS

动态交互：结构和样式交互（javascript）

2、HTML

1、超文本标记语言 hyper text markup language

2、书写页面结构，文档类型都是.html

3、特点：大量的标记确定页面结构和组成。

4、浏览器用F12 或右键检查打开开发者工具

3、语法特点

1、标签由<标签名> 组成

2、分类：

1、双标签<html></html> 成对出现，有开始和结束

2、单标签 <meta> 只有开始标签没有结束标签，单表签闭合<meta/>。

3、标签语法： <title charset = "utf-8"> 标签内容 </title>

<标签名属性名='属性值'> 标签内容 </标签名>

标签属性用来对标签本身做补充说明

4、语法介绍

1、所有网页内容都需要放在<html> 标签中

2、<head>标签中存放网页文档的头部信息，例如编码方式，链接的外部文件，网页关键字，用户不可见，浏览器选项卡上的信息，例如网页标题，logo是用户可见的。

3、HTML大小写不敏感，都可以识别，推荐统一小写。

4、文档声明方式 <!DOCYTYPE html> 1、指定文档类型 2、设置CSS对网页元素的渲染方式。

5、W3C 制定标准

5、标签类型

1、块级元素

1、独占一行不与其他元素狗工行显示

2、默认宽度与父元素一致

3、可以手动设置宽高尺寸

2、行内元素

1、可以与其他元素共行显示

2、宽高由元素的内容决定，不能手动设置宽高

3、行内块元素

既可以共行也可以手动设置宽高

<!DOCTYPE html>
<html>
	<head>
		<title>我的第一个网页</title>
		<meta charset = 'utf-8'>
		<link rel='shoucut icon' 
		href="images/enemy1.png" type="image/png">
	</head>
	<body>
		网页介绍
	</body>
</html>

4、标签

文本标签

<!-- 注释 -->
文本标签：
<h1 algin = left center right(左中右)></h1> 标题
<p></p> 段落
<b> </b> 加粗文本
<strong> </strong> 加粗文本
<u> </u> 文本自带下划线
<i> </i> 斜体文字
<s> </s> 删除线文本
<del> </del> 删除文本
<sub> </sub> 下标
<sup> </sup> 上标
<span> </span> 特殊设置
<lable></lable> 
&lt; <小于号  &gt;>大于号  
&nbsp 空格
&copy 版权格式 ©
&yeen 人民币符号
<hr/> 水平线
<br/>  换行

列表标签

列表标签： 
无序里列表 默认是实心黑点
<ul type = square实心方块 circle 空心圆 None 什么都没有>
    <li></li>
    ...
</ul>

有序列表
type默认取值 1  ，  i I罗马数字大小写 a A 字母大小写
start = '' 起始位置
<ol>
    <li></li>
    <li></li>
</ol>

定义列表
<dl>
    <dt>订单跟踪</dt>
        <dd>1</dd>
        <dd>1</dd>
        <dd>1</dd>
</dl>

图片标签：

图片标签：
url组成： 协议 域名 目录路径 文件名
    路径分为相对路径和绝对路径
    绝对路径： 从根目录开始   注意：斜杠问题
    file：/// 协议是windows上打开本地文件的协议，类似于文件管理器。
    相对路径：从当前文件所在的目录位置开始查找。 ../ 返回父级目录
width=200px  hight  宽高设置
alt = '' 图片显示错误会显示内容
title = '' 鼠标悬停会显示。                 
<img scr = '图片地址' />

超链接：

超链接：主要用来链接到其它相关页面的。
1、指定网络URL进行跳转，一定要写协议
2、设置网页的打开方式
是否在当前选项卡窗口打开。
target = 默认是 _self默认当前   _blank 表示在新窗口打开
<a href ="" > </a>
3、href 为空 表示链接到当前页，会进行页面刷新。
   href 为#号，也是当前页，不会进行页面刷新。
锚点连接：
页内跳转：设置跳转位置。

锚点方式1：<a name='123'>  href = '#123 '
<a href = '#anchor1'>早年经历</a> 跳转到锚点
<a href = ''>演绎作品</a>
<p>

锚点
<a name="anchor1">

</p>


锚点方式2：<a href = '#anchor2'>   <span id = "anchor2">

表格标签

表格标签
border = '' 表格的边框属性
width = '' 宽度
height = '' 高度
bgcolor = '' 背景颜色  1、颜色名称  
                      2、十六进制表示 rgb #开头，每两位代表一种颜色。 eg：#
align = 'center' 水平对齐方式
valign = '' 垂直方向对齐方式  middle，top，bottomo， 对于行列有用。对table不一样。在td 和 tr中应用。

cellspacing = '20px' 单元格和单元格，单元格和表格之间的举例。
cellpadding = '' 单元格内容框和单元格之间的间距，上右下左四个方向。


单元格合并，不管是跨行还是跨列都是对td进行操作。合并之后，要对表格进行调整。
colspan = '3' 表示跨列合并取值位数字，表示跨几列。
rowspan = '4' 表示跨几行来合并。
<table border = '' width='500px' height='500px' bgcolor=''>
    <caption>  </caption>  书写表格标题<caption> 必须第一个写。
    <thead> </thead> 表头信息
    <tbody> </tbody> 表格主体
    <tfoot> </tfoot> 表格尾部
    <tr> 创建行
        <td></td> 创建列
        <td></td>
    </tr>
    
</table>

表单：

1、作用：向服务器发送数据。
2、基本语法
     <form action=" " method=" " >
     </form>
   属性：
        1、action 属性指定表单数据提交到服务器中哪个文件，属性值为文件的路径。
        2、method属性指定数据提交的方式  常用  get/post
        注意：
          get 请求，数据会被拼接在URL后面，直接发送，安全性较低；数据大小受限，最大为2K。                
          是默认的提交方式。
          post请求：数据会被打包，单独发送。隐式提交给服务器，安全性高，数据大小不受限制。

3、表单控件（重点）
      1、文本输入框和密码框
         <input type = "" name = "" value=""/> 
                  type:类型有   text 文本 password 密码输入框
                  name:属性定义控件名称，缺少的话无法提交。
                  placeholder：密码有6位数字组成，用户提示。
                  value:指定当前控件的值，如果输入，就不填写。
                  maxlenth="":输入长度限制。
                 
      2、单选和复选框
        <input type="radio" name="uname"/> radio:单选框，名字一样时，只能选一个
        <input type="checkbox" name=""/>  checkbox复选框，
                  注意：name属性用来定义控件名称并且分组，一组按钮的name属性必须一致。
                       value属性，用来设置控件的值，最终会发送给服务器。
                        checked：默认选中。
      3、隐藏域
         
        隐式发送一些附加信息，用户不可见
         <input type="hidden"  name="uid" value="101" />
      4、文件上传,用户上传东西。
         <input type="file" name="uimg">
      5、文本域（）
         <textarea name="uinfo" cols="宽度" rows="高度">  </textarea>
              cosls：指定文本域默认显示的列数，一行能够显示的英文字符量，中文减半。
              rows：指定文本域默认显示的行数。
              disabled：这个控件禁用了，适用于所有的表单控件。

      6、下拉列表
        <select name="area">         
            <optgroup label="河北省">  分组
            <option>北京</option> 下拉内容
            </optgroup>
        </select>         
            注意：
                value属性值时最终发送给服务器的数据。
                optgroup 用来进行熏香分组，通过label属性设置组名
                option 用来设置具体的选项
      7、提交  重置按钮  普通按钮
            1、提交按钮 <input type="submit">
               将表单数据发送给服务器
            2、重置按钮 <input type="reset">
               重置表单按钮，回复到初始状态
            3、普通按钮 <input type="button"> 
            4、普通按钮<button type="submit"></button>
                     type可以取值：submit，reset，button（普通按钮） 
                     value:普通按钮可以通过value属性设置显示文本
      8、lable for ID：(单击文字也可以选中)
            <label for="male">男</label>
            <input type="radio" value="male" id="male" name="">   
            使用label标签显示文本，将label的标签属性 for 的属性值设置为将要绑定的表单
            控件的id值。   
      9、取色板
            <input  type="color"  name="colorpick"

信代码，得永生

关注

0
点赞
踩
0

收藏

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

1、网页构成静态页面：结构HTML 和样式CSS 动态交互：结构和样式交互（javascript）2、HTML 1、超文本标记语言 hyper text markup language 2、书写页面结构，文档类型都是.html 3、特点：大量的标记确定页面...
复制链接

扫一扫

专栏目录