HTML与CSS网页开发基础快速入门
目录
一、HTML文档结构
二、HTML常用标记
三、表格标记
四、表单标记
五、超链接与图片标记
六、HTML5新增内容
七、CSS样式表
一、HTML文档结构
< html >标记
是HTML文件的开头，所有HTML文件均以<html>开头，以</html>结束。
< head >标记
是HTML文件的头标记，作用是放置HTML文件的信息。如定义CSS样式代码可放置在< head>与< /head>标记中。
< title >标记
为标题标记，可将网页的标题定义在<title>和</title>标记中。
< body >标记
是HTML页面的主题标记。页面中的所有内容定义在<body>标记中。
演示：
<head><title>HTML页面</title>
</head>
<body>
</body>
</html>二、HTML常用标记
添加文本
在<body></body> 中直接添加文本即可
换行标记<br>
换行标记单独使用，不是成对出现的。
段落标记
< p >开头，< /p >结尾。在段前和段后都会添加一个空行，段落标记中的内容不受影响。
标题标记
用于创建不同级别的标题，在HTML中有6哥标题标记，从<h1>~<h6>，<h1>代表一级标题，以此类推。
居中标记
HTML中默认布局是从左到右依次排序，若想居中，可以使用<center>标记，<center>开头，</cente>结尾。放置在之中的文本均采用居中的对齐方式。
文字列表标记
使用文字列表可实现文字以列表实行排序。分为无序列表和有序列表。
无序列表<ul></ul>
其中每一个列表项以<li>表示。
有序列表<ol></ol>
每个列表项用<li>表示。
三、表格标记
表格标记<table>
所有表格的定义都放置在<table>...</table>中。
table中有许多属性：
width属性→表格宽度
height属性→表格高度
broder属性→表格的边框
align属性→设置对齐方式
bgcolor属性→设置表格背景色
表格标题标记<caption>
定义表格标题，也有多种属性。以<caption> 开头，</caption>结尾。
表头标记<th>
表格行标记<tr>
定义表格中的一行。一对<tr></tr>代表一行，表示第二行则再给一个<tr></tr>。有属性可设置。
单元格标记<td>
<td>可以被嵌套在<tr>中，且一个<tr>中可以有多个<td>。有属性可设置。
演示：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>HTML页面</title>
</head>
<body>
<table align="center" bgcolor="#deb887" width="200" border="1"><caption align="center">表格</caption><th align="center">表头</th><tr><td align="center">name </td><td align="center">age </td><td align="center">id </td></tr><tr><td align="center">qqq </td><td align="center">12 </td><td align="center">1 </td></tr><tr><td align="center">aaa </td><td align="center">13 </td><td align="center">2 </td></tr><tr><td align="center">zzz </td><td align="center">14 </td><td align="center">3 </td></tr>
</table>
</body>
</html>
四、表单标记
表单是HTML中重要的元素，是用户与网页交互信息的重要手段。
表单标记<form></form>
在表单中可以定义处理数据的URL地址等信息。包含以下属性功能：
action属性
指定处理表单数据程序的URL地址
method属性
指定数据传输的方式，即get或post方式
get：将输入的数据追加在指定的URL地址后面，安全性低
post：将输入数据按照post方式传输到服务器，安全性高
name属性
指定表单的名称，可自定义其值。
onSubmit属性
指定当用户单击提交按钮时触发的事件
target属性
指定输入数据结果显示在哪个窗口中显示，其属性值可设置为：
_blank：在新窗口中打开
_self：在同一个窗口中打开
_parent：在上一级窗口中打开，一般使用框架页时经常使用
_top：在浏览器的整个窗口中打开
表单输入标记<input></input>
使用最频繁的标记！
属性 描述 type 指定添加的字段的类型，共有10个可选值 disabled 指定输入字段不可用，无法被选中 checked 指定字段是否被选中，可选中，用于type属性值为radio和checkbox情况下 width 指定输入字段的宽度 height 指定输入字段的高度 maxlength 指定输入字段的可输入文字的个数。用于type属性为text和password情况下 readonly 指定输入字段是否为只读 size 指定输入字段的宽度。当type属性为text和password时，以字数为单位，其他情况以像素为单位 src 指定图片来源，只有当type属性为image时有效 usemap 为图片设置热点地图，只有当type属性为image时有效。属性值为URI，URI格式为#+<map>标记的name属性值 alt 指定当图片无法显示时显示的文字，只有当type属性为image时有效 name 指定输入字段的名称 value 指定输入字段默认的数据值 type属性的属性值
可选值 描述 可选值 描述 text 文本框 submit 提交按钮 password 密码域 reset 重置按钮 file 文件域 button 普通按钮 radio 单选按钮 hidden 隐藏域 checkbox 复选框 image 图像域 演示：
<form action="test01.html" method="post" name="test01">用户名：<input name="username" type="text" id="userName4" maxlength="20"><br>密码：<input name="pwd1" type="password" id="PWD14" size="20" maxlength="20"><br>确认密码：<input name="pwd2" type="password" id="PWD25" size="20" maxlength="20"><br>性别：<input name="sex" type="radio" value="男" checked>男 <input name="sex" type="radio" value="女">女<br>爱好：<input name="like" type="checkbox" id="like1" value="旅游">旅游<input name="like" type="checkbox" id="like2" value="体育">体育<input name="like" type="checkbox" id="like3" value="听音乐">听音乐<input name="like" type="checkbox" id="like4" value="看书">看书<br> E-mail:<input name="email" type="txet" id="PWD224" size="50"><br> <input name="Submit" type="submit" class="bth_grey" value="确定保存"><input name="Reset" type="reset" class="bth_grey" value="重新填写"> </form>nbsp的全称是：no breaking space,意为非截断空白符，该符号与前后单词合并为一个单词，不应该被截断
nbsp详情见：前端中的 ；_寻梦皮皮虾的博客-CSDN博客_前端nbsp拉列表框标记<select></select>
可以在页面中创建下拉列表框，要使用<option>标记添加内容
属性 描述 name 指定列表框名称 size 指定列表框中现实的选项数量，超出该数量的选项可以通过拖动滚动条查看 disabled 指定当前列表框不可使用 multiple 用于让多行列表框支持多选 多行文本标记<textarea>
通常出现在<form>表单中
属性 描述 name 指定多行文本框的名称，当表单提交后，在服务器段获取表单数据时应用 cols 指定现实的列数 rows 指定显示的行数 disabled 指定当前文本框不可用 readonly 指定当前文本框为只读 wrap 设置文字是否自动换行，可选值见下表 wrap属性
属性 描述 hard 默认值，表示自动换行，字数超过cols时自动换行，换行符同时被提交到服务器 soft 自动换行，字数超过cols时自动换行，换行符不被提交 off 不自动提交，只能用Enter建进行换行
五、超链接与图片标记
超链接标记
语法格式：
<a href=""></a>
属性href用于设定连接到哪个页面中
图片标记<img>
属性 描述 src 指定图片来源 width 指定图片宽度 height 指定图片高度 border 指定图片外边框的高度 alt 指定图片无法显示时显示的文字
六、HTML5新增内容
| 标记 | 用途 |
|---|---|
| <section> | 表示页面中的一个区域，可以与h1、h2等结合使用，表示文档结构 |
| <article> | 表示页面中一块与上下文不相关的独立内容，通常有自己的标题，脚注等内容 |
| <header> | 表示内容区域或整个页面的标题 |
| <footer> | 表示内容区域的脚注 |
| <aside> | 表示当前页面或文章的附属信息部分，可以包含与内容相关的引用，导航条等信息 |
七、CSS样式表
CSS规则
用于对页面进行美化
语法格式：选择符：{属性：属性值；}
CSS选择器
标记选择器
用于声明页面中哪些标记采用哪些CSS样式；局限在于如果有三个<h2>标记，只想改变其中两个，标记选择器则不适合可使用类别选择器
演示：
<style>form{color: palevioletred;} </style>改变整个form的字体颜色，效果如下：
类别选择器
类别选择器的名称由用户自己定义，并以“.”开头，应用时只需要在标记处使用class属性进行声明即可
演示：
<table align="center" bgcolor="#deb887" width="200" border="1"><caption align="center" class="one">表格</caption><th align="center" class="two">表头</th><tr class="three"><td align="center">name </td><td align="center">age </td><td align="center">id </td></tr><tr><td align="center">qqq </td><td align="center">12 </td><td align="center">1 </td></tr><tr><td align="center">aaa </td><td align="center">13 </td><td align="center">2 </td></tr><tr><td align="center">zzz </td><td align="center">14 </td><td align="center">3 </td></tr> </table> //-----------------------CSS类别选择器如下-------------------// <style>.one{font-family: 宋体;font-size: 24px;color: red;}.two{font-family: 楷体;font-size: 24px;color: saddlebrown;}.three{font-family: 黑体;font-size: 24px;color: navy;} </style>
one,two,three可以修改为其他关键字
id选择器
通过页面中的id属性来选择增添样式，与类别选择器基本相同，但是不能同时使用同一个id标记来修改标记。因此id选择器只能被使用一次。而类别选择器可以多次调用。
<style>#like1{font-size: 18px;}#like2{font-size: 28px;}#like3{font-size: 38px;} </style>命名id选择器时，以“#”开始。
页面包含CSS形式
行内样式
在相应行的声明中加入style属性实现
<header style="color: red;font-family: 'Agency FB'">fsd</header>”；“的位置位于两个冒号之中用于连接多个样式
内嵌式
上文的标记选择器、类别选择器和id选择器使用的就是内嵌式的方法
链接式
当面临每个页面中相同的HTML标记要求采用相同的样式时，前两种方法都显得较为笨重，因此采用链接式，将CSS样式定义在一个独立的文件中，在HTML页面中通过<link>标记引用
h1,h2,h3{ //定义CSS样式color:red;font-family:楷体; } p{color:blue;font-family:宋体;font-size: } <link href="css.css"/> //页面引入CSS样式表
改变指针形状，见：CSS/HTML 改变鼠标指针形状_梓沂的博客-CSDN博客_html改变鼠标指针形状
常用CSS属性列表汇总见：常用的CSS属性列表汇总 - 东方
HTML与CSS网页开发基础快速入门相关推荐
- 0基础快速入门CSS技术栈（4）—图解详细阐述CSS的复合选择器、标签显示模式、行高、CSS背景，及最为重要的CSS三大特性附带权重计算笔试题（附详细案例源码解析过程）
文章目录 1. 0基础快速入门CSS技术栈(4) 2. 重点提炼 3. CSS复合选择器 3.1 后代选择器(重点) 3.1.1 example01 3.2 子元素选择器 3.2.1 exmaple0 ...
- 零基础快速入门web学习路线（含视频教程）
下面小编专门为广大web学习爱好者汇总了一条完整的自学线路:零基础快速入门web学习路线(含视频教程)(绝对纯干货)适合初学者的最新WEB前端学习路线汇总! 在当下来说web前端开发工程师可谓是高福利 ...
- 零基础快速入门SpringBoot2.0教程 （三）
一.SpringBoot Starter讲解 简介:介绍什么是SpringBoot Starter和主要作用 1.官网地址:https://docs.spring.io/spring-boot/doc ...
- python海龟教程_Python 零基础 快速入门 趣味教程 (咪博士 海龟绘图 turtle) 7. 条件循环...
条件循环能够让程序在条件成立时(即为真时)重复执行循环体中的语句.如果条件一直成立(即永远不会为假),则循环会一直进行下去,不会停止.如果初始时,条件不成立,则循环 1 次也不会执行.Python 中 ...
- 【Python零基础快速入门系列 | 03】AI数据容器底层核心之Python列表
• 这是机器未来的第7篇文章 原文首发地址:https://blog.csdn.net/RobotFutures/article/details/124957520 <Python零基础快速入门 ...
- 【Python零基础快速入门系列 | 07】浪漫的数据容器：成双成对之字典
这是机器未来的第11篇文章 原文首发链接:https://blog.csdn.net/RobotFutures/article/details/125038890 <Python零基础快速入门系 ...
- ROS2零基础快速入门
ROS2入门最快需要多少时间?3天: ROS2开发一款基础机器人需要多久?3个星期: ROS2怎么才能算"精通"?不可能,3年也不行-- 如何判断一款通用性软件成熟并可以投入精力去 ...
- 【FPGA基础快速入门6】实战-----触摸按键控制LED灯的学习
[FPGA基础快速入门6]实战-----触摸按键控制LED灯的学习 触摸按键的种类 触摸按键主要可以分为四大类: 电阻式.电容式.红外感应式以及表面声波式. 1.电阻式触摸按键又多块导电薄膜按照按键的 ...
- 《Kubernetes零基础快速入门》简介
容器技术快速入门书<Kubernetes零基础快速入门>,京东当当天猫都有发售.定价59元,打折一下更合适. Kubernetes为容器化的应用提供了资源调度.部署.运行.服务发现.扩容和 ...
最新文章
- 【地图API】收货地址详解2
- Linux操作系统（二：shell脚本）
- 1.Hello,World all the time
- 爱创课堂每日一题第五十二天- js延迟加载的方式有哪些？
- MVC中HtmlHelper用法大全
- linux命令lsof
- 如何写一个好的方法-读Clean Code 有感
- 算法和时间复杂度概念（一级）
- Visual Studio 2017各版本安装包离线下载、安装全教程
- 引用另一个Android工程的方法详解
- Maven : jenkins 报错 solution will not be attepmted utils the update interval of nexus has elapse
- windows笔记-【内核对象线程同步】等待函数
- sqoop导入数据（保持一致性）--staging-table
- ubuntu安装 Samba实现局域网文件共享 win10访问
- matlab如何预测数据,matlab预测数据
- eclipse svn Subversive
- 地理空间数据云下载遥感影像
- 一维 cnn matlab,1D-CNN 一维信号的深度学习算法和例子包括CNN - 下载 - 搜珍网
- 虚拟机u盾怎么使用_Linux下如何使用网银
- 帷幕的帷是什么意思_古时纺织什么样子？穿越时空看古代纺织发展