HTML与CSS

1.HTML

1.1基础语法

HTML
超文本标记语言
基础语法
标签
单标签
无属性<标签名属性名=“属性值”/>
有属性<标签名
双标签
无属性<标签名></标签名>
有属性<标签名>属性名=“属性值”></标签名>
整体结构
表示当前是一个页面

头部信息

身体部分
doctype
html5版本声明，需要写在第一行

1.2常用标签

1.2.1标题和水平线

注意：标签的属性之间要以空格隔开。
body标签
bgcolor 背景颜色 1.颜色名 2.rgb 3.16进制
text 字体颜色 1.颜色名 2.rgb 3.16进制
标题标签
h1~h6 依次从大到小
不建议在页面中写多个h1标签，h1标签可以被搜索引擎获取到，如果有多个，可能会进入搜索引擎的黑名单。
水平线标签
hr
width 宽度 1.百分比 2.px
align 对齐方式 left right center（默认）
size 水平线粗细

1.2.2段落和换行

<body><p>段落和换行</p><p>段落和换行</p><hr /><p align="left">常用属性常用属性常用属性</p><p align="right">常用属性常用属性常用属性</p><p align="center">常用属性常用属性常用属性</p><p align="justify">常用属性常用属性常用属性常用属性常用属性常用属性常用属性常用属性常用属性常用属性常用属性常用属性常用属性常用属性常用属性常用属性常用属性常用属性</p><hr />HELLO <br>
WORLD
</body>

1.2.3列表

<body><h2>无序列表</h2><ul><li>小黑</li><li>小白</li><li>小灰</li></ul><ul type="disc"><li>小黑</li><li>小白</li><li>小灰</li></ul><ul type="square"><li>小黑</li><li>小白</li><li>小灰</li></ul><ul type="circle"><li>小黑</li><li>小白</li><li>小灰</li></ul><h2>有序列表</h2><ol><li>小黑</li><li>小白</li><li>小辉</li></ol><ol type="1"><li>小黑</li><li>小白</li><li>小辉</li></ol><ol type="a"><li>小黑</li><li>小白</li><li>小辉</li></ol><ol type="A"><li>小黑</li><li>小白</li><li>小辉</li></ol><ol type="i"><li>小黑</li><li>小白</li><li>小辉</li></ol><ol type="I"><li>小黑</li><li>小白</li><li>小辉</li></ol>
</body>

1.2.4div和span

<body><div align="center">层，块级元素，标签会自动换行。</div>你好<div>层，块级元素，标签会自动换行。<br>常用于布局</div><hr /><span>xiaohei</span>
</body>

1.2.5格式化标签

<body>你好<br> <font color="red" size="7" face="黑体">你好</font><hr>HELLO WORLD<pre>HELLO              WORLD</pre><hr>粗体--<b>粗体</b><strong>粗体</strong><br>斜体--<i>斜体</i><br>下划线--<u>下划线</u><br>中划线--<del>中划线</del><br>下标--H<sub>2</sub>O<br>上标--2<sup>2</sup>
</body>

1.2.6a标签

<body><!--相对路径--><a href="05_列表.html">05</a><!--绝对路径--><a href="E:/HTML/html/05_列表.html">05</a><!--网络路径--><a href="https://www.baidu.com">百度</a><!--新开窗口打开--><a href="05_列表.html" target="_blank">05</a></body>

1.2.7图片

1.2.8表格

<body><table border="1" width="500px" align="center" style="border-collapse:collapse ;"><tr><th>班级</th><th>姓名</th><th>年龄</th><th>性别</th></tr><tr align="center"><td rowspan="2">101班</td><td>小黑</td><td>18</td><td rowspan="3">男</td></tr><tr align="center"><td>小白</td><td>19</td></tr><tr align="center"><td>102班</td><td>小明</td><td>18</td></tr></table></body>

1.2.9表单

1.2.9.1from

1.2.9.2input

<body>文本框：<input type="text" value="xiao hei"/><br />文本框：<input type="text" value="xiao hei" maxlength="11"/><br />文本框：<input type="text" value="xiao hei" readonly="readonly"/><br />密码框：<input type="password" /><br>单选框：<input type="radio" value="man" name="sex" />男 <input type="radio" value="woman" name="sex" />女<br>复选框：<input type="checkbox" value="1" name="sex"/>1<input type="checkbox" value="2" name="sex"/>2<input type="checkbox" value="3" name="sex"/>3<br />文件域：<input type="file"/> <br/>  隐藏域：<input type="hidden" value="admin"/> <br/>普通按钮：<input type="button" value="普通按钮"/> <br/>提交按钮：<input type="submit" value="提交按钮"/> <br/>重置按钮：<input type="reset" value="重置按钮"/> <br/></body>

1.2.9.3textarea与label

<body>姓名：<input type="text" name="uname"/><br>简介：<textarea rows="10" cols="30"></textarea><hr /><label>姓名</label>：<input type="text" name="uname" /><br></body>

1.2.9.4button

<body><form action="https://www.baidu.com"><input type="text" name="uname"/><input type="button" value="普通按钮"/><input type="submit" value="提交按钮"/><input type="reset" value="重置按钮"/><hr /><button type="button">普通按钮</button><button type="submit">提交按钮</button><button type="reset">重置按钮</button></form></body>

1.2.9.5下拉框

<body><select name="city"><option>上海</option><option>北京</option><option>广东</option></select><select name="city" multiple="multiple" size="2"><option>上海</option><option>北京</option><option>广东</option></select><select name="city"><option value ="">请选择城市</option><option value="sh">上海</option><option selected="selected">北京</option><option disabled="disabled">广东</option></select></body>

1.2.10常用字符实体

卢克的HTML与CSS基础相关推荐

html与css项目,项目六HTML与CSS基础.doc
项目六HTML与CSS基础.doc 项目六: HTML与CSS基础课题名称:6．2 CSS样式表的使用(一) 教学目标 1．知识与技能目标熟练掌握插入Div 标签和设置样式定义的方法:理解CSS样 ...
CSS基础_Day04
CSS基础一.CSS继承 1.给 HTML 的 body 元素添加样式每一个 HTML 页面都有一个 body 元素. 我们可以通过设置 background-color 的属性值为黑色,来证明 ...
CSS基础_Day03
CSS基础一.给 div 元素添加背景色 background-color 属性可以设置元素的背景颜色. .green-background {background-color: green; } ...
CSS基础_Day02
CSS基础一.字体 1.更改元素的字体大小字体大小由font-size属性控制. <style>p{font-size:16px;}//设置p元素字体大小为16px </styl ...
CSS基础_Day01
CSS基础一.CSS简介 CSS 的全称是 Cascading Style Sheet(层叠样式表),它主要用来控制网页的样式. CSS 的选择器区分大小写,因此要谨慎使用大写. 可以设置以下内容: ...
学习笔记（二）——CSS基础
文章目录一.什么是CSS 二.CSS基本使用 2.1.行内式(内联样式) 2.2.内部样式 2.3.外部样式 2.3.1.嵌入式 2.3.2.导入式三.选择器 3.1.基础选择器 3.1.1.标签 ...
css点击a标签显示下划线_好程序员HTML5培训教程-html和css基础知识
好程序员HTML5培训教程-html和css基础知识,Html是超文本标记语言(英语全称:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言. Css ...
和前端撕出逼格，撕的硬气 - 产品应该懂的html/css基础知识
之前和前端交流页面的实现方案时,经常被告知:这个效果实现不了:那个东西兼容性不好:这个做不了...明明这些效果别人家已经实现出来了,哎,奈何不懂前端相关,没辙! 最近花了点时间看了些前端相关的博客.论 ...
CSS基础笔记（w3school）
CSS 概述 CSS 基础语法 1.CSS语法 2.值的不同写法和单位 3.记得写引号 4.多重声明 5.空格和大小写 CSS 高级语法 1.选择器的分组 2.继承及其问题 3.友善地对待Netsca ...

卢克的HTML与CSS基础