1.HTML概念

HTML:超文本标记语言
超文本:超级文本,可以包含各种类型,图片、视频、音频
标记:元素,节点,标签
HTML是最基层开发网页的语言

1.1.HTML结构

文档声明,用来声明HTML文档所遵循的HTML的规范半年
头部分,存放HTML文档的基本信息
例:标题,文档使用编码,会被浏览器优先加载
体部分,用来存放网页可视化数据,即真正的网页数据
<title>声明网页标题<br /><mate charset="utf-8">申明文档编码格式<br />HTML属性需要在标签上声明,一个标签可以声明多个标签,值需要用””标起来</p> <p>1.图像标签<img src="....." width=*%></img><br />img用于声明是图像标签 src属性指定图片地址<br />width 宽度 height 高度<br />2.超链接标签<a></a><br />target属性用于指定以何种方式打开超链接<br />self:默认值,表示在当前窗口打开超链接<br />blank:表示在新的窗口中打开超链接<br />3.表格标签<table></table><br />table:在网页中定义表格<br />tr: 用于定义表格中的行<br />td: 用于定义表格中的单元格<br />th: 用于定义表头行中的单元格<br />4.表单标签<form></from><br />input元素<input type="text" name=""><br />type:指定类型 <br />text普通文本框<br />password 密码输入框<br />radio 单选框<br />checkbox 多选框<br />button普通按钮<br />submit提交按钮<br />select option标签<br />select用于定义一个下拉选框<br />option用于定义一个上拉选框<br />selected设置当前option选项默认选中<br />textarea多行文本输入区域:<br />cols属性:用于设置文本输入框的列数(宽度)<br />rows属性:用于设置文本输入框的行数(高度)<br />placeholder属性:设置输入框中的提示消息</p> <p><a name="V1tD1"></a></p> <h4 id="57eeu3"><a name="57eeu3" class="reference-link"></a><span class="header-link octicon octicon-link"></span>提交表单数据时什么情况表单没有被提交?在提交表单是如果表单中的标签上没有name属性,那么在提交表单时这项会被忽略</h4><p><a name="yZvGv"></a></p> <h4 id="8p685h"><a name="8p685h" class="reference-link"></a><span class="header-link octicon octicon-link"></span>如何让多个单选框只能有一个被选中?要求多个单选框具有相同的name属性</h4><p><a name="OhYoD"></a></p> <h4 id="5o34av"><a name="5o34av" class="reference-link"></a><span class="header-link octicon octicon-link"></span>为什么单选框、复选框选择某一项后提交的值都是on?因为单选框和复选框都只能选择,并不同于用户名,密码输入框,直接输入文本</h4><p><a name="PNkNa"></a></p> <h4 id="9drjw5"><a name="9drjw5" class="reference-link"></a><span class="header-link octicon octicon-link"></span>如何设置单选框和多选框默认选择某一项?checked属性=”checked”</h4><p><a name="CSVjn"></a></p> <h4 id="2vwl1s"><a name="2vwl1s" class="reference-link"></a><span class="header-link octicon octicon-link"></span>如何设置下拉选框默认选择某一项?selected属性=”selected”</h4><p><a name="mAWAe"></a></p> <h4 id="9tjmwd"><a name="9tjmwd" class="reference-link"></a><span class="header-link octicon octicon-link"></span>下拉选框中的value属性作用是什么?选框中value所赋予的时候,在选择的时候提交的会时value值</h4><p><a name="ki4Yn"></a></p> <h2 id="8p861t"><a name="8p861t" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2.CSS概念</h2><p>层叠样式表,用于修饰、渲染网页的一门技术<br />使用css样式修饰网页,可以实现将设置样式的css代码和展示数据的html代码进行分离,增强了网页的展示能力 <a name="nwskl"></a></p> <h3 id="2upgs2"><a name="2upgs2" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2.1.HTML引入CSS</h3><p>1.style属性引入(不推荐,任意造成结构混乱,无法进行复用并且无法达到html和css分离)<br />2.通过style标签引入(在head标签内部添加style标签,在style标签内部直接书写css样式,达到了html和css分离)<br />3.通过link连接引入外部的css文件(在head标签内部通过link标签引入css外部文件,达到了css代码统一管理,实现了css和html代码分离,并实现了复用) <a name="8QVlD"></a></p> <h3 id="as22h1"><a name="as22h1" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2.2.CSS选择器</h3><p>所谓选择器就是能够在html中帮助我们选中元素进行修饰的一门技术<br />1.标签名选择器 元素名/标签名{} (通过标签名或元素名选择)<br />2 .class选择器 .clas值{} (通过在标签属性上添加class值进行选择,一个标签可以有多个标签名)<br />3.id选择器 #id值{} (通过标签设置独一无二的编号id唯一的 选中元素)<br />4.后代选择器 元素名 后代元素名{} (选中指定元素内部的指定后代元素)<br />5.属性选择器 选择器[属性条件]…{} (在选择器选中的元素的基础上,根据元素的属性条件进行过滤和筛选)</p> <p>当同一类选择器,同时给某些元素设置了样式,如果样式冲突了,那么写在后面的样式会覆盖前面的样式<br /> 优先顺序为:id选择器->类选择器->元素名选择器</p>