HTML基础

来源：互联网发布：淘宝最畅销产品排行榜编辑：程序博客网时间：2024/06/08 16:46

HTML超文本标记语言,可以在一个html文档,通过书写不同的标签,在浏览器中显示不同的内容
标签也可以称为元素
<head>头标签
在这个标签里面,可以对当前这个html文件做一些配置
<title>标签,表示html的标题
<h1><h2><h3>.....系列,一般用于表示浏览器显示页面的标题
<p>表示一个段落
在html文档中,不识别换行符,空格,制表符等符号
<br />表示换行
 表示空格
<img src="图片地址">用于导入图片

语义化

人与人之间的交流,同样的语言,不同的语气,会出现不同的效果
但是机器与机器之间的交流,肯定不会出现语气词
机器也无法听到你什么语调去表达
这时候语气化就出现了,通过带有语气的标签,可以向机器”表达”语气了
比如strong标签表示更强调的意思,那么机器在读取该标签内容时,就知道了这里是被强调的部分
比如q标签表示引用的话,那机器在读取q标签的内容时,就知道这里是引用他人的文字了
<em>是强调,是斜体
<strong>是更强的强调,是加粗斜体
<q>引用
<blockquote>和q一样,比q更长的引用

列表

<ul>有序列表
<ol>无序列表
ul和ol的使用方式相同

<ul>    // li标签表示一行,多个li标签就组成了列表    <li></li>    <li></li></ul>

表格

表格的层级:表行单元格
标签中的summary属性,表示表的摘要

<table summary = "我是表的摘要"><!--table标签中的summary属性,表示表的摘要--><!--不会再页面上显示,增强语气化-->    <caption>我是这个表的标题</caption>    <!--tr表示行-->    <tr>        <!--表头-->        <th>姓名</th>        <th>年龄</th>    </tr>    <tr>        <!--第二行就是数据了-->        <!--使用td标签,表示每一个单元格-->        <td>张三</td>        <td>12</td>    </tr>

超链接

<a href="连接地址">
可以是本地地址,也可以是网页地址

表单

<form>就是表单,用来向后台传输参数
form的属性:method:get/post,是网络请求的两种方式
<子标签>
<label for = "name"> 姓名:<label>
label标签就是用来给用户一个提示
<input id="name" type = "text">
input标签
type: 属性表示,input这个标签要以何种形式展示给用户
id: 属性标识一个标签,就像身份证号标识一个人一样
通过id属性的值,就可以找到对应的标签
id属性在同一文件中不可重复
name: 属性标签,服务器获取网络数据,就是根据这个name,xxx.get(name),得到数据

<textarea>大段的文本框可以使用
属性 rows:几行 cols:几列

单选框和复选框

radio单选框

<label>性别</label><input name="1" type="radio" value="男"><input name="1" type="radio" value="女">

让多个radio成为一组,这样点击一号按钮后,再点击二号按钮,一号按钮会被重置为未选择状态,也就是说一组中,只能有一个按钮被选择,通过设置一样的name属性,可以将多个按钮重置为一组

checkbox复选框

<input type="checkbox"><input type="checkbox">

下拉菜单

<!--选择标签--><select>    <!--每一个option,就是每一个选项-->    <option>选项一</option>    <option>选项二</option>    <option>选项三</option>

div

用来划分区域,可以理解为一块一块的

span

当我们想要为某段文字设置一个样式,但又不想使用含有语义化的标签(比如强调),仅仅是想给某段文字改个颜色什么的,那么可以将这段文字放在span标签中

父标签,子标签,后代标签,兄弟标签

<div>哈哈    <p>嘻嘻        <span>啦啦</span>    </p>    <p>嘻嘻        <span>啦啦</span>    </p></div>

两个p标签,都是div的子标签
两个span标签,都是p的子标签,都是div的后代标签,但不是div的子标签
两个p之间,可以理解为兄弟标签

阅读全文

2 0