html笔记

安和桥661
220 阅读5分钟

html的标签以及一些常规定义

网站：网站是指在因特网上根据一定的规划，使用html等制作用于展示特定内容相关的网页合集。

网页：网页是网站的基本元素，其中包括图片、链接、文字、声音、视频等网页元素组成。

html：html指的是超文本标记语言，标记语言是一套标记标签。

为什么需要web标准？

浏览器不同，它们显示页面或者排版就有些许差异，比如文字大小不同，一般通常使用谷歌浏览器（Chrome）

web标准的构成

1.结构用于对网页元素进行整理和分类（html）

2.表现用于设置网页元素的版色、颜色、大小等外观样式（css）

3.行为是指网页模型的定义及交互的编写（javaseript）

标签关系：并列关系，包含关系

标签一般成对出现，一个开始标签，一个结束标签，例如:

<html></html>

还有单标签

<br/>强制换行标签

html中常用的标签

<p><\p>段落标签
<h1></h1>--<h6></h6>标题标签
<a></a>超链接标签

<strong></strong>-加粗-<b></b> 都是加粗,<strong>语义更强，一般使用前者<strong>
<em></em>-倾斜-<i></i> 都是倾斜,<em>语义更强,一般使用前者<em>
<del></del>-删除线—<s></s>都是删除线，<del>语义更强，一般使用前者<del>
<ins></ins>-下划线-<u></u> 都是下划线，<ins>语义更强。一般使用前者<ins>
<div>和<span>是没有语义的，它们就是一个盒子，用来装内容。

div是division的缩写，表示分割、分区（大盒子）
span意为跨度，跨距（小盒子）

图像标签

<img src="图像url“/>（单标签）

src是标签的必须属性，它用于指定图像文件的路径和文件名
alt是替换文本，当图像显示不出来的时候用文本替换
title是提示文本，当鼠标放到图像上显示的文字
width设置图像的宽度，height设置图像的高度
border设置图像边框的粗细

宽度，高度设置一个就好，另一个会跟着等比例缩放

我们的文件一般有个目录文件夹，这就是旋转木马就是我们的目录文件夹，打开这个文件的第一层就是我们的根目录，比如旋转木马.html和cake.jpeg就是我们的根目录。

image.png

图片路径

图片相对路径；

1.  同一级路径 <img src="图片名”/>  
2.  下一级路径 <img src="图片文件夹/图片名"/>  
3.  上一级路径<img src="__图片名"/>(上一级有几层就要翻几次，就是__/__/上两层)

a超链接格式

<a> hrf="跳转目标（就是网址）" target="目标窗口的弹出方式”>文本或图像</a>

href用于指定链接目标的url地址（必须属性）
target链接打开网页方式：_self默认当前页面打开 、_blank在新窗口打开

内部链接<a href="同一级.html“>  
空链接<a href="#">用于开发时未想到内容先用空链接替代

网页元素链接：把图片，视频等等看成文字，直接放在中间即可使点击图片进行链接跳转
锚点链接：先设置一个想要点击然后跳转的连接，在href=”“里面写上#id名字。然后在想要跳转到的目的地的标签里加一个id=”你设置的id名“。然后保存，刷新，就能点击文本链接，跳转到设置了id的锚点了

image.png HTML中注释标签 以"<！--“以”--!>"结束 （快捷键command+/）
特殊字符：空字符代码&nbsp； 小于号<代码< 大于号>代码&gt；

表格

表格的基础语法

<table></table>表格标签
<tr></tr>定义表中的行，必须在<table>中
<td></td>定义表中单元格，必须在<tr>中
<th></th>表头单元格，必须在<tr>里面

<thead></thead>表格中的头部部分，在<table>中，包含第一行
<tbodt></tbody>表格中的主体部分，在<table>中，包含除第一行的主体部分

表格属性

属性名属性值执行
alignleft、center、right对齐方式
border"1"或不给值边框，默认为“”，表示没有边框
cellpadding像素值单元格文字之间的距离
cellspacing像素值单元格之间的空白

合并单元格
跨行合并：rowspan="合并单元格的个数”
跨列合并：colspan=“合并单元格的个数”
怎么确定目标单元格：跨行，最上侧为目标单元格； 跨列：最左侧为目标单元格；合并单元格后,会自动删除多余单元格以及里面的内容。

image.png

列表标签

1.无序列表

<ul></ul>无序列表  <li></li>列表项
<ul>中不能随意放标签，只能放<li>
<li>中可以放任何元素

2.有序列表

<ol></ol>列表排序以数字显示，并且用<li>定义列表项

3.自定义列表

<dl></dl>自定义列表
<dt></dt>定义一个项目名字
<dd></dd>描述每一个项目/名字
<dt>和<dd>一起使用

表单标签

由表单域，表单元素（表单控件）、提示信息组成

<form>表单域 <dorm action="url地址" mthod=“提交方式” name=“表单域名称”>各种表单域控件</form>
表单元素

input输入表单标签

<input type="属性值“>

type属性值：

  • text定义文本，默认宽宽度20字符
  • checkbox定义复选框（多选）
  • radio定义单选按钮
  • reset定义重置按钮，清除表单中所有数据
  • submit定义提交按钮，把表单数据发送到服务器
  • button点击按钮，可以
  • image定义图片形式按钮
  • file文件域按钮，上传文件使用
  • password定义密码字段
  • hidden定义隐藏的输入字段
input的其他常用属性:

name定义input元素名称
value规定input元素的值
checked input元素首次加载时应当被选中
maxlength规定输入字符长度

name元素要求单选按钮和复选框要有相同的name值

<label>标签点击文本会自动跳到表单元素上 
<label for="sex">男</label>
<input type=”ridio“ name=”nan“ id=”sex“/>
案例代码
<tr>
      <td>性别：</td>
      <td><input type="radio" name="xingbie" value="sex" id="nan"><label for="nan">男</label>
      <input type="radio" name="xingbie" value="sex" id="nv"><label for="nv">女</label>
        </td>
    </tr>

select下拉表单

<select>
  <option>选项1</option>
  <option>选项2</option>
  <option>选项3</option>
</select>
默认选项在<option selected="selected">

textarea文本域，添加在input里可以生成一个文本域
cols="每行中的字符数”
rows=“显示行数”

avatar
文章
阅读
粉丝