前端学习——HTML

HTML: Hyper Text Markup Language(超文本标记语言)


Web标准:主要由 结构(Structure)、表现(Presentation)、行为(Behavior)三个方面构成。

结构:HTML

表现:CSS

行为:Javascript


HTML语法规范:

HTMl的标签是由尖括号包围的关键词构成。<>

双标签: < > <  />  单表签:<  />

HTML基本结构标签

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

<!DOCTYPE html> 告诉浏览器采用html5版本显示页面

<html lang="en"> <html lang="zh-CN"> 语言种类 英文 中文网站

<meta charset="UTF-8"/> 规定HTML文档使用哪种字符编码


HTML常用标签

标题标签:     <h1> - <h6> 独占一行,作为标题使用,并且根据重要性递减  加标题字体会变粗

段落标签:     <p></p>文本会根据浏览器宽度自动换行,段落和段落之间保有间隙

换行标签:     <br /> 单表签 强制换行(只是简单另起一行)


 文本标签格式化标签

加粗  <strong></strong>  <b></b> 

倾斜  <em></em>  <i></i>

删除线  <del></del>  <s></s>

下划线  <ins></ins>  <u></u>


<div></div>  单独占一行  大盒子

<span></span>  小盒子  一行上可以多个


 图像标签和路径(重点)

单标签<img src="图像URL">  src必须属性 指定文件的路径和文件名

src   必须属性 指定文件的路径和文件名
alt  文本 替换文本,图像不能显示的文字
title 文本 提示文字,鼠标放在图像上,显示的文字
width 像素 设置图像宽度
height 像素 设置图像高度
border 像素 设置图像的边框粗细

weight和height修改一个,另一个等比缩放。


图像标签和路径(重点)

路径

目录文件 根目录(打开目录文件夹第一层)

相对路径:从引用文件所在位置为参考 即图片想对于HTML页面的位置

同级:    <img   src="baidu.gif" />

下一级路径  /  <img   src="image/baidu.gif" />

上一级路径  ../ <img   src="../baidu.gif" />

 绝对路径:是指目录下的绝对位置,直接到达目标位置,通常从盘符开始 或网络中完整的地址(绝对路径中层级关系:\  较少使用)


超链接标签(重点)

语法格式  <a  href="跳转目标"  target="目标窗口的弹出方式">文本或图像</a>

href  必须属性 目标的URL   在当前页面打开:_self  _blank新窗口

外部链接:http://.....

内部链接:网站内部页面之间的相互链接。

空链接:如果没有确定的链接目标时  < a herf="#">....</a>

下载链接:如果herf里面地址是一个文件: .exe 或压缩包:  .zip  会下载这个文件

网页元素链接:文本 图像 表格 音频 视频等都可以添加超链接

锚点链接:可以快速定位到网页中的某个位置   在链接文本中的herf属性中添加属性值为 #名字的形式

<h1 id="1">1</h1>

<a herf="#1">跳转</a>


HTML中的注释和特殊字符

注释: <!--内容-->   快捷键:cltrl + /

特殊字符 空格   &nbsp;  小于号 &lt;  大于号&gt;


表格标签 用于显示 展示数据 

<table>  <!--用于定义表格的标签-->

    <tr>  <!--用于定义表格中的行-->

        <td></td> <!--用于定义表格中的单元格  table data-->

    </tr>

</table>

表头单元格标签 <th></th> table head HTML表格的表头部分 其文本内容会加粗居中显示

表格属性 实际开发时使用CSS来实现  table属性

align left  center right 对齐方式
border 1或"" 是否加边框 默认为""
cellpadding 像素值 单元边缘与其内容之建的空白 默认1像素
cellspacing 像素值 单元格之间的空白 默认为2像素
width/height 像素值或百分比 表格宽度/高度

表格结构标签   <thead></thead>标签的头部区域 必须拥有<tr>标签

<tbody></tbody>标签标签的主体区域

合并单元格

合并单元格方式:跨行合并:最上侧单元格为目标单元格 写合并代码

                         跨列:最左侧单元格为目标单元格

记得删除多余单元格


列表标签:用来布局,更加整齐  类型:无序列表 有序列表 自定义列表

无序列表 <ul>标签表示HTML页面中项目的无序列表 列表项用<li>标签定义

<!--无序列表-->
<ul>
    <li></li>    <!--无顺序之分,时并列的 <ul>中只能放<li>标签 <li>标签可以容纳所有元素,相当于容器-->
    <li></li>
</ul>
<!--有序列表-->
<ol>
    <li></li> 
    <li></li>
</ol>
<!--自定义列表     <dl>中只能包含<dt><dd> 个数无限制 常一个<dt>对应多个<dd> <dt><dd>里面可以放任何标签-->
<dl>
    <dt></dt>  <!--定义项目/名字-->
    <dd></dd>  <!--描述项目/名字-->
    <dd></dd>
</dl>

表单标签  目的:收集用户信息  组成:表单域 表单控件(表单元素) 提示信息

表单域 包含表单元素的区域 <form> 会把它范围内的表单元素信息提交给服务器

action url地址 用于指定接收并处理表单数据的服务器程序的url地址
method get/post 表单数据提交方式
name 名称 指定表单名称,以区分同一个页面中多个表单域

表单元素 <input type="属性值"/> 用于收集用户信息 单标签

type属性表

button 定义可点击按钮(大多数情况通过js脚本启动)
checkbox 定义复选框
file 定义输入字段和浏览按钮,供文件上传
hidden 定义隐藏的输入字段
image 定义图像形式的提交按钮
password 定义密码字段,该字段中的字符被掩码
radio 定义单选按钮
reset 定义重置按钮,重置按钮会清楚表单中所有数据
submit 定义提交按钮,提交按钮会把表单数据发送到服务器
text 定义单行的输入字段,用户可以在其中输入文本,默认宽度为20个字符

除type外还有以下属性

name 自定义 input元素的名称
value 自定义 input元素的值 打开页面就默认显示内容
checked checked

规定此input元素首次加载时应当被选项(checked radio)

maxlength 正整数 规定输入字段最大长度

注:checked radio 单选按钮必须有相同的name

value: 打开页面就默认显示(text password)  当用户选择时返回的值(checkbox 和radio )


<label> 标注标签 用于绑定一个表单元素 当点击<label> 标签内文本时 就会跳转到相应的表单元素上

<!--label语法-->
<label for="sex"></label>
<input type="radio" name="sex" id="sex"/>  <!--for 和id属性值相同-->

<select>下拉表单元素 应用场景:多个选项,需要节省页面空间

<select>
    <option></option><!-- <select>中至少包含一个<option>-->
</select>            <!-- <option>中定义selected="selected" 默认选定状态-->

textarea 文本域元素 应用场景:用户输入内容较多的情况下

<textare rows="3" cols="20"> <!-- cols:每行中的字符数 rows:显示的行数 实际通过CSS改变-->
</textare>

学会查阅文档


记:看b站pink老师视频后所作笔记

posted @   Li_WenWu  阅读(51)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
点击右上角即可分享
微信分享提示